Question

我正在尝试开发一个可嵌入的小部件。此窗口小部件将一些UI元素呈现到客户的页面中。

此小部件如下所示：

<script src="//example.com/widget.js?param1=a&param2=b" async></script>

允许用户在一个页面上嵌入多个小部件，每个小部件都有一组不同的参数。

在这个小部件脚本中，我正在尝试加载渲染我的小部件所需的其他javascript和css文件。

这是我用来加载其他javascript文件的函数。

function loadScript(scriptUrl) {
    var s = document.createElement('script');
    s.async = true;
    s.src = scriptUrl;
    document.body.appendChild(s);
}

问题是，当每页有多个嵌入时，以这种方式加载的每个脚本都会被多次加载。

如何确保每个文件只加载一次？例如，我尝试在该加载器脚本中加载一个jQuery引用，我看到如果我将我的窗口小部件嵌入5次，则有5次调用jquery库。

Answer 1

3行额外代码

var scripts = {};  //record what is loaded
function loadScript(scriptUrl) {
    if (scripts[scriptUrl]) return;  //exit if loaded
    scripts[scriptUrl] = 1;  //mark that it is loaded
    var s = document.createElement('script');
    s.async = true;
    s.src = scriptUrl;
    document.body.appendChild(s);
}

确保不会多次下载相同的javascript文件

1 个答案: