如何使用单个 javascript 属性.js文件在多个 HTML 文件中设置变量?



更新:事实证明这是一个内存缓存问题,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 缓存

只是想为你指出正确的方向!希望这有帮助。

最新更新