Question

我在我的应用程序中注意到，当调用datatables/tabletools时，copy_csv_xls_pdf.swf被调用三次。我把a jsfiddle which (sometimes) illustrates the issue：

放在一起

此行为特别成问题，因为在同一请求期间，后续加载时，浏览器似乎没有缓存文件的 intial 加载。

对于由SWF“供电”的每个按钮，似乎都有对此文件的请求。

仍然，为什么这个文件会被多次加载？有必要吗？如何防止（同时仍然提供相同的功能）？

忽略以下不必要的代码....

...仅提供SO以允许我包含指向jsfiddle的链接：

$('#browser_data').dataTable({
    "bPaginate": false,
    "bAutoWidth": false,
    "bLengthChange": false,
    "sDom": "<'row-fluid'<'span6'f><'span6'<'pull-right'T>>r>t",
    "oTableTools": {
        "aButtons": [ "copy", "xls", "pdf" ],
        "sSwfPath": "http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
    }
});

Answer 1

Google Chrome

以下是请求标头的摘要 - 无论是硬刷新还是刷新，标头都是相同的：

:host:datatables.net
:method:GET
:path:/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf
:scheme:https
:version:HTTP/1.1
accept:*/*
accept-encoding:gzip, deflate, sdch
accept-language:en-US,en;q=0.8,sw;q=0.6
cache-control:no-cache
cookie:

你看到cache-control:no-cache了吗？这似乎表明在发出这些请求时会明确关闭缓存。每次刷新都会显示每个请求的状态200 ...我永远不会看到304.

就屏幕截图中的 304 状态而言，重要的是它们 304,304,304 而不是 200,304,304 < / strong>即可。这表明每个请求在某种程度上都是唯一的，而不是 URL-wise ，因此每个请求都必须显式缓存。让我们看看这是否是一个正确的假设....

Mozilla Firefox

以下是我执行某些测试的步骤：

通过将缓存限制设置为.34GB
来设置缓存非常
加载页面：并刷新并注明结果

通过硬刷新然后刷新来复制结果

以下是结果 - 每个按钮的一个状态：

初始装货状态： 200,200,200,2

刷新： 304,304,304,304

硬刷新： 200,200,200,2

硬刷新后刷新： 304,304,304,304

考虑到按钮不完全相同，即使.swf网址相同，这不是很完美吗？ 同一个网址每次都会产生不同的按钮！是否可以使用某种签名来区分每个按钮的请求？ 这是动态内容的行为 - 相同网址的内容相同。

最后一次测试：

我关闭缓存 - 将缓存限制设置为0，结果为：

硬刷新： 200,200,200,2

刷新： 200,304,200,200

<强>结论

缓存每个按钮内容。这就是为什么即使有足够的磁盘空间分配给缓存初始页面加载和硬刷新显示200,200,200,200而不是200,304,304,304。

这些按钮是否会被缓存是您的浏览器设置的函数：如果启用了缓存以及分配给缓存的空间。

很可能 200,304,200,200 可能表示没有足够的磁盘空间来缓存 Copy 按钮，但只是 CSV 按钮，没有任何东西可以缓存 Excel 和 PDF 按钮。

Answer 2

在您的情况下（您的jsfiddle），您使用了3个按钮：复制，另存为excel并另存为pdf。脚本（TableTools）正在复制使用的swf（copy_csv_xls_pdf.swf）3次，每个按钮一次，因为它每次都用于复制内容。 swf是一个ZeroClipboard实例，被认为是复制数据的好主意，因为flash可以访问系统剪贴板，而浏览器不是这种情况。当然，使用TableTools documentation演示使用4个按钮：复制，另存为csv，另存为excel并保存为pdf，这就是为什么它加载了swf的4个实例，看看html代码：

<a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="example">
    <span>Copy</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 47px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_1" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="47" height="32" name="ZeroClipboard_TableToolsMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=47&amp;height=32" wmode="transparent">
    </div>
</a>
<a class="DTTT_button DTTT_button_csv" id="ToolTables_example_1" tabindex="0" aria-controls="example">
    <span>CSV</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_2" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_xls" id="ToolTables_example_2" tabindex="0" aria-controls="example">
    <span>Excel</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 48px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_3" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="48" height="32" name="ZeroClipboard_TableToolsMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&amp;width=48&amp;height=32" wmode="transparent">
    </div>
</a>

<a class="DTTT_button DTTT_button_pdf" id="ToolTables_example_3" tabindex="0" aria-controls="example">
    <span>PDF</span>
    <div style="position: absolute; left: 0px; top: 0px; width: 43px; height: 32px; z-index: 99;">
        <embed id="ZeroClipboard_TableToolsMovie_4" src="/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="43" height="32" name="ZeroClipboard_TableToolsMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&amp;width=43&amp;height=32" wmode="transparent">
    </div>
</a>

编辑：

重新阅读你的问题和评论后，我不知道你是否想知道为什么页面正在加载swf的n个实例或者如何避免这种情况？如果这是第一种情况，我把我所看到的作为解释，否则我认为TableTools开发人员可以通过最小化嵌入的swf对象来优化他们的代码，我不知道它是否真的可能。

为什么tableTools对同一个SWF文件进行多次调用？

2 个答案: