0

埋め込み可能なウィジェットを開発しようとしています。このウィジェットは、いくつかの UI 要素を顧客のページにレンダリングします。

このウィジェットは次のようになります。

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

ユーザーは、それぞれ異なるパラメーター セットを持つ複数のウィジェットを 1 つのページに埋め込むことができます。

このウィジェット スクリプト内で、ウィジェットのレンダリングに必要な他の JavaScript ファイルと CSS ファイルを読み込もうとしています。

これは、他の JavaScript ファイルをロードするために使用している関数です。

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

問題は、ページごとに複数の埋め込みがある場合、この方法で読み込まれた各スクリプトが複数回読み込まれることです。

各ファイルが一度だけ読み込まれるようにするにはどうすればよいですか? たとえば、そのローダー スクリプト内に jQuery 参照をロードしようとすると、ウィジェットを 5 回埋め込むと、jquery ライブラリへの呼び出しが 5 回あることがわかります。

4

1 に答える 1

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);
}
于 2013-02-12T03:26:37.203 に答える