更新:事实证明这是一个内存缓存问题,Firefox 和 Chrome 都在每次页面刷新时从内存缓存中提取属性.js文件,而不是从服务器下载新版本。 评论下方的"网络"选项卡提示允许我看到此行为。谢谢!
在HTML 文件中按如下方式使用元标记根本没有帮助:
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
我正在开发一个包含多个 HTML5 页面的 UI 仪表板,这些页面显示的值每隔几分钟就会更改一次。这些值来自我使用 JQ 解析的 API,然后使用 bash 更新属性.js文件。 多个 HTML5 页面生成此属性.js文件,以便为 HTML5 页面中的 JavaScript 变量赋值。
问题是,这适用于第一个HTML5页面,但第二个HTML5页面没有获得值。如果我注释掉第一页的"src"行,第二页将获得值。 似乎我这样做的方式仅适用于将值填充到单个 HTML5 页面中。 我宁愿不克隆每个 HTML 页面的属性文件。我正在尝试找到一种方法来使所有HTML5页面填充单个属性.js文件中的值。
[文件1.HTML]
<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>
[文件2.HTML]
<head>
...
<script type="text/javascript" src="./properties.js"></script>
...
</head>
<body>
...
<main>
...
<div class="text-value" id="ts1_info.var1"></div>
...
<script type="text/javascript">
document.getElementById("ts1_info.var1").innerHTML = ts1_info.var1;
</script>
...
</main>
</body>
[属性.JS]
var ts1_info;
ts1_info = {
var1: "my_value",
...
;
[文件层次结构]
page1.html
|
|_ page2.html
|_ properties.js
在第 1 页中.html src 行向下下降 1 级,如下所示:
<script type="text/javascript" src="./sub_directory/properties.js"></script>
在第 2 页中.html src 行将进入同一级别:
<script type="text/javascript" src="./properties.js"></script>
尝试将变量存储在要跨其他页面访问的本地存储中。本地存储允许在Web浏览器中保存键/值对,因此当变量更新一个页面时,它也可用于另一个页面。
您通常不使用 . 在链接到脚本文件的路径中,尝试
<script type="text/javascript" src="sub_directory/properties.js"></script>
和
<script type="text/javascript" src="properties.js"></script>
它适用于不同的文件名,但不适用于相同的文件名,这真的是没有意义的。
这似乎是浏览器缓存问题。我需要弄清楚如何强制 Chrome 和 Firefox 在每次页面刷新时新鲜下载属性.js文件,而不是从缓存中获取。
当我想防止我的脚本被缓存时,我打算做的事情是在文件路径的末尾添加一个参数,如下所示:scripts.js?v=0001
或在我的 php 项目中,每次更新文件名时,我都使用 npm 在文件名末尾添加一个 uuid。
您可以在此处查看更多信息: 如何防止 Javascript 缓存
只是想为你指出正确的方向!希望这有帮助。