使用JavaScript在src或href属性上添加时间戳

Question

我已经寻找答案2天了，但是我找不到解决我的问题的好方法。

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

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

使用PHP很容易实现，因为你可以将时间戳和HTML一起添加。但由于我只能使用前端代码，最好的方法是如何添加带有时间戳的script或link标签，以便该脚本不从缓存中加载？

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

有谁能帮帮我吗？

- Guido Visser

---

你可以使用JavaScript动态添加脚本元素。 - Arun P Johny

var script = document.createElement('script'); script.setAttribute('src', 'js/javascript.js?c=' + (new Date()).getTime()); document.head.appendChild(script); - Arun P Johny

Answer 1

在创建元素、设置属性并将其附加到文档时，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>

(我简直不敢相信我之前没想到这个解决方案)

- Guido Visser

Answer 2

既然你正在使用jQuery，我建议你这样做：

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

来自jQuery文档：

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

- Mario A

---

这个有点可行...它确实带有时间戳加载！但是似乎我的javascript.js文件中的所有AJAX调用都没有像它们应该的那样运作。我在脚本中设置了请求头，但它们都没有发送请求头，导致我的AJAX函数失败。 - Guido Visser

很遗憾，无法这样做... :( - Guido Visser

Answer 3

请看jQuery getScript()。

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

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

- Malcolm

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - A.L

你的建议确实有道理。谢谢。 - Malcolm

Answer 4

动态加载JavaScript/CSS。同时在加载时添加随机版本。

例如：http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml 无论如何，我相信您已经知道您正在做的不是最佳实践。在需要更具体要求的情况下，可以将HTTP头设置为JS/CSS文件的no-cache。这些信息可以在使用的HTTP服务器中设置，无需编程语言。 如何控制所有浏览器的网页缓存?

- sashwat

---

哇，我不知道你可以这样做！有没有一种适当的方法在IE10中测试这个？ - Guido Visser

使用IE的开发人员工具，在网络选项卡中查看HTTP代码，200表示已重新加载。 - sashwat

这很明显，但如果我在Chrome中检查，我会看到一个名为“无缓存”的请求头（所以我可以假设它正在工作），但它不在IE10的请求头中。 - Guido Visser