使用 JavaScript 在 src 或 href 属性上附加时间戳答案

【问题标题】：Append timestamp on src or href attribute with JavaScript使用 JavaScript 在 src 或 href 属性上附加时间戳
【发布时间】：2015-03-17 05:26:03
【问题描述】：

这两天我一直在寻找答案，但我找不到解决问题的好方法。

我正在开发一个只能使用标准前端文件（HTML、CSS、JavaScript（我使用 jQuery））的 Web 应用程序。没有与 HTML 合并的后端脚本。

我想要实现的是在我的 HTML 中添加一个 <script> 标记，但将时间戳添加为变量，例如：<script type="text/javascript" src="js/javascript.js?c=1421656264439"></script>。

使用 PHP 实现起来很简单，因为您只需将时间戳与 HTML 一起添加即可。但由于我必须只使用前端代码，添加带有时间戳的script 或link 标记的最佳方法是什么，这样脚本就不会从缓存中加载？

由于客户端使用 Internet Explorer 10，我需要一个可以使用的答案...

谁能帮帮我？

【问题讨论】：

可以使用javascript动态添加脚本元素
点赞var script = document.createElement('script'); script.setAttribute('src', 'js/javascript.js?c=' + (new Date()).getTime()); document.head.appendChild(script);

标签： javascript jquery html caching timestamp

【解决方案1】：

在创建元素、设置属性并将其附加到文档类型时，由于某种原因，javascript.js 中的 AJAX 调用中没有设置 beforeSend 标头。这也是使用$.getScripts('js/javascript.js');的问题

我突然意识到我可以在脚本标签中尝试一个简单的document.write()。事实证明，它就像一个魅力。

我的解决方法：

    <script type="text/javascript">
        var _c = new Date().getTime();
        document.write('<script type="text/javascript" src="js/javascrtipt.js?c='+_c+'"><\/script>');
    </script>
</body>

（我不敢相信我不能早点想出这个解决方案）

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，我建议您这样做：

$.getScript( "js/javascript.js" );

来自 jQuery 文档：

默认情况下，$.getScript() 将缓存设置为 false。这会将带时间戳的查询参数附加到请求 URL，以确保浏览器在每次请求时下载脚本。

【讨论】：

这行得通，有点……它确实带有时间戳！但似乎我在 javascript.js 文件中的所有 AJAX 调用都没有表现得像他们应该的那样。他们都不发送我在脚本中设置的 Reuqest 标头，导致我的 AJAX 函数失败。
不幸的是不能这样做...... :(

【解决方案3】：

动态加载 javascript/css。另外在加载时添加随机版本。

例如http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

无论如何，我相信你已经知道你在做什么不是最佳实践。如果有更具体的要求，可以将 JS/css 文件的 HTTP 标头设置为 no-cache。无需编程语言即可在使用的 HTTP 服务器中设置此信息。

How to control web page caching, across all browsers?

【讨论】：

哇，我不知道你能做到这一点！有没有合适的方法在 IE10 中进行测试？
使用IE的开发者工具。在network选项卡中看到HTTP代码，200表示再次加载。
这很明显，但是如果我签入 Chrome，我会看到一个名为“No-Caching”的请求标头（因此我可以假设它正在工作），但它不在 IE10 的请求标头中

【解决方案4】：

请看jQuery getScript()。

我认为它可以解决你的问题：

默认情况下，$.getScript() 将缓存设置为 false。这会将带时间戳的查询参数附加到请求 URL，以确保浏览器在每次请求时下载脚本。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。
您的建议确实有道理。谢谢。