1

これはおそらく不可能ですが、尋ねる価値があります。headページのセクションにスクリプト タグを動的に挿入しています。現時点では、document.write多くの人が眉をひそめているものを使用していますが、うまく機能します.

ただし、ここで概説した理由により、 に代わるものを見つけたいと思いますdocument.write。

したがって、これを行う関数が必要です。

<!-- The document.write writes the new script here synchronously so it will block other scripts -->

<script type="text/javascript">
    // Code here that uses the code from the dynamically inserted script
</script>

ページに要素を挿入するだけでなく、これらの要件を満たすjQueryまたはプレーンなjavascriptを使用して何かを提案できますか?

  1. 関数が呼び出されたポイントに要素を配置します。たとえば、script タグは、それを呼び出した script タグの後に配置されます。
  2. スクリプトは同期的にロードされるため、完了するまで他のスクリプトをブロックします

Google は独自のGoogle.load()方法でこれを行いますが、document.write を使用していますか? きっとそうじゃない...

4

2 に答える 2

2

この記事を見ることができます - http://www.phpied.com/non-onload-blocking-async-js/ facebook では、SDK を非同期的にロードするために同様のスクリプトが使用されています。

これはクロスブラウザーであり、ページ上の html が有効でない場合でも (head/body タグが欠落している場合でも)、スクリプトを非同期的にロードできます。

以下は、facebook の SDK からの直接の例です。

  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));

スクリプトを 1 回だけロードできるため ( if (d.getElementById(id)) {return;}.

スクリプトを詳しく見ると、多くの利点が見られます。

  • ページにはタグが必要ですscript（非同期読み込み用のスクリプトのため）。そのため、最初のスクリプト要素を取得しています
  • すでに追加されている SDK を探します
  • 指定された ID を持つ新しいスクリプト要素を作成します
  • スクリプトのsrc
  • 特定の場所にスクリプト要素を挿入します
  • スクリプトを非同期的にロードするため、ページのブロックを防ぎます
  • 自己呼び出し関数は、ドキュメント オブジェクトの短いエイリアスを作成します。これにより、スクリプトがよりコンパクトになります。
于 2012-11-22T12:42:23.200 に答える
2

さまざまな方法で行うことができます。ここのさまざまな回答で述べたようにLink。しかし、私は以下を使用します

var load_js = function(data, callback)
            {
                    var head = document.getElementsByTagName("head")[0];

                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = data;
                    head.appendChild(script);

                    if(callback != undefined)
                            callback();
            }

            load_js("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");
于 2012-11-22T12:42:36.490 に答える