web-dev-qa-db-ja.com

動的に読み込まれたスクリプトを待機しています

私のページ本文に、AJAX呼び出しの結果としてこのコードを挿入する必要があります。

_    <p>Loading jQuery</p>
    <script type='text/javascript' src='scripts/jquery/core/jquery-1.4.4.js'></script>
    <p>Using jQuery</p>
    <script type='text/javascript'>
        $.ajax({
            ...
        });
    </script>
_

$.load()は使用できません。ドキュメントが既に読み込まれているため、イベントは発生しません。

これは安全ですか？そうでない場合、カスタムの生成されたコードが実行される前にjqueryスクリプトがロードされたことを確認するにはどうすればよいですか。

javascriptjqueryhtmlload-order
32
Aaron Digulla

かなり安全です。歴史的に、<script>タグは完全にブロックされているため、2番目の<script>タグは、前者が解析/実行を完了するまでは検出できません。唯一の問題は、「最新の」ブラウザがスクリプトを非同期に読み込み、遅延する傾向があることです。したがって、順序が正しいことを確認するには、次のように使用します。

<p>Loading jQuery</p>
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script>
<p>Using jQuery</p>
<script type='text/javascript'>
    $.ajax({
        ...
    });
</script>

ただし、これをHTML文字列としてDOMにプッシュする代わりに、動的スクリプトタグ挿入を使用することをお勧めします。同じ話になるでしょう

var scr  = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0];
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);
31
jAndy

クエリできるように、スクリプトファイルにIDを追加します。

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

次に、JavaScriptでロードリスナーを追加します

<script>
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad(); 
  });
</script>
33
Rob Fox

_jQuery 1.6_にも新機能があります。 jQuery.holdReady()と呼ばれます。実際には自明です。 jQuery.holdReady(true)を呼び出すと、jQuery.holdReady(false)を呼び出すまで、readyイベントは発生しません。これをfalseに設定しても、準備完了イベントは自動的に起動されず、保留が解除されるだけです。

ドキュメントから取得したスクリプトをロードするノンブロッキングの例を次に示します。

_$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});
_

詳細については、 http://api.jquery.com/jQuery.holdReady/ を参照してください

10
Umur Kontacı

複数のスクリプトがロードされるのを待つ

次のヘルパーは、複数のスクリプトを一度だけロードし、promiseを返します。

async function cirosantilli_load_scripts(script_urls) {
    function load(script_url) {
        return new Promise(function(resolve, reject) {
            if (cirosantilli_load_scripts.loaded.has(script_url)) {
                resolve();
            } else {
                var script = document.createElement('script');
                script.onload = resolve;
                script.src = script_url
                document.head.appendChild(script);
            }
        });
    }
    var promises = [];
    for (const script_url of script_urls) {
        promises.Push(load(script_url));
    }
    await Promise.all(promises);
    for (const script_url of script_urls) {
        cirosantilli_load_scripts.loaded.add(script_url);
    }
}
load_scripts.loaded = new Set();

(async () => {
    await cirosantilli_load_scripts([
        'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js',
    ]);

    // Now do stuff with those scripts.

})();

GitHubアップストリーム： 定義 および 使用法 。

Chromium 75でテスト済み。

1
Ciro Santilli 新疆改造中心996ICU六四事件