多次加载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加载到thise站点时，代码会读取属性，并根据它们显示div中的相关内容。

该脚本在Firefox中运行良好（例如：如果有3个嵌入代码，则浏览器显示3个内容），但它在Chrome上不能很好地工作（它只显示一个内容）。

正如我所指出的，Chrome会检测js加载的次数，例如3次，但是第一段代码可以正常工作而其他部分则不然。

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

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

Answer 1

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

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