向 JS 文件动态添加参数（缓存清除）不会导致重新加载答案

【问题标题】：Dynamically-added Parameter to JS File (cache-busting) Does Not Cause Reload向 JS 文件动态添加参数（缓存清除）不会导致重新加载
【发布时间】：2022-05-06 03:45:44
【问题描述】：

我已在我的 CSS 和 JS 文件中添加了一个随机日期参数，以便“缓存破坏”...

HTML（头部）

<!-- STYLE -->
<link href="assets/css/style.css" rel="stylesheet" id="style">

<!-- SCRIPTS --> 
<script src="assets/js/scripts.js" id="scripts"></script>

JS (jQuery 3.4.1)

var randomParam = new Date().getTime();
// CSS
var ogCSS = $("head").find("#style").attr("href");
$("head").find("#style").attr("href", ogCSS + "?" + randomParam);
// JS
var ogJS = $("head").find("#scripts").attr("src");
$("head").find("#scripts").attr("src", ogJS + "?" + randomParam);

CSS 文件效果很好。 JS文件没那么多。

“网络”标签（CSS重命名并再次调用，JS不是）...

“来源”选项卡（JS 不再调用，有原始名称）...

我无法使用 PHP。我无法访问服务器。这都是客户端。

我该怎么做才能让它发挥作用？还是就是这样？

更新

忘了提到 DevTools 中的“元素”显示了正确重命名的 JS 文件（见下文）。它只是没有在“网络”中被重新调用或显示为在“来源”中被重命名。所以它被卡在了缓存中。

【问题讨论】：

您能否在 chrome 浏览器的开发人员工具中检查脚本标签值，我假设您用于 JavaScript 的日期值不正确，您能否使用相同的 css 日期值而不是再次创建使用新的new Date().getTime()。
@CNKR - 在 DevTools 中查看 Elements 时，中的 JS 文件被正确重命名，只是没有像 CSS 文件那样被再次调用而反映在 Network 或 Sources 中。所以它被卡在缓存中。使用为 CSS 和 JS 生成的相同日期值无效。结果相同。
更新问题以显示 JS 文件在中被重命名，只是没有反映在其他地方或被再次调用。
您能否检查开发者工具中的网络选项卡以确保带有时间戳的 script.js 加载成功或失败。我想了解什么时候调用代码来用日期更改脚本标签中的 src。
@CNKR - 我在问题中分享了“网络”选项卡的图片 ^ - JS 文件仅使用原始名称加载。带时间戳的 script.js 根本不会显示在“网络”选项卡中。在“元素”选项卡的中，文件正在被重命名（参见问题中的图像）。所以，它只是重命名，而不是重新加载。

标签： javascript jquery google-chrome-devtools browser-cache

【解决方案1】：

我知道这个问题很老，但如果有人遇到它（就像我一样），问题可能就在这里：

ogCSS + "?" + randomParam

这不会创建有效且完整的查询字符串。查询字符串的格式应该是：

?<param_name>=<param_value>

但是在上面的代码中，我们只有?<param_value>。这意味着该值将被视为一个名称，可能带有一个空值，我使用过的大多数服务器通常都会忽略它。为了使这一点正确，您需要同时附加一个参数名称（此用例通常为“_”）和一个值，例如：

ogCSS + "?_=" + randomParam

【讨论】：