javascript - 多次加载js – Chrome问题

Question

我正在尝试使用外部 js 文件加载 div 中的内容。

js文件需要加载的和div加载的一样多。 例如:

<div class="classname1" userId="101010" unitId="111"></div>
<script src="//example.com/js/thefile.js"></script>

<div class="classname2" userId="101010" unitId="222"></div>
<script src="//example.com/js/thefile.js"></script>

<div class="classname2" userId="101010" unitId="333"></div>
<script src="//example.com/js/thefile.js"></script>

此代码将提供给用户以将其嵌入到他们的网站中。比如，它将嵌入到 example2.com 和 example3.com 中。

当 js 在这个站点加载时，代码读取属性并根据它们显示 div 内的相关内容。

该脚本在 Firefox 中运行良好(例如:如果有 3 段嵌入代码，则浏览器显示 3 个内容)，但在 Chrome 上运行不佳(它仅显示一个内容)。

正如我所指出的，Chrome 会检测 js 加载的次数，例如 3 次，但是第一段代码有效而其他部分无效。

注意:当我使用一个在 Chrome 中有效的技巧时，但我不想使用这个简单的解决方案:我通过添加 ?v=1 、 ?v=2 和 ?v 更改了每个嵌入代码的 src url =3 在 .js 文件之后。

任何解决此问题的想法将不胜感激。

Answer 1

这里真正的问题不是文件没有加载 3 次，而是代码没有执行 3 次。

浏览器应该缓存这些文件。而且，您可以预料到多次包含同一个文件时会出现不一致的行为。使用随机数，如 v1 等将禁用缓存。这里最好的做法是将 JS 文件的功能包装在一个函数中，然后只加载该文件一次。您可以简单地调用该函数三次，或根据需要多次调用。