3

javascriptファイルをDOMに追加する関数を作成しようとしていますが、新しく追加されたJSファイルが完全に読み込まれるまで残りのコードを待機させたいと考えています。このコードは正しく機能しませんが、これが私が達成しようとしていることの例です。

$(document).ready(function () {
    var newScript = document.createElement("script");
    newScript.setAttribute("type", "text/javascript");
    newScript.src = "http://www.domain.com/script.js";
    document.getElementsByTagName("body")[0].appendChild(newScript);
    $(newScript).ready(function () { // This is the idea of what I'm trying to do, but this doesn't seem to actually wait until the new file is completely loaded.
        foo.bar(); // foo is a new global variable which is declared in the newScript. This causes an error "foo is not defined".
        // Here is where more code I wish to execute should continue.
    });
});
4

4 に答える 4

3

ムーサが上記のコメントで述べたように。jQueryのgetScriptを使用し、successコールバック関数を使用して他の関数をトリガーします。

于 2012-07-16T21:43:03.627 に答える
1

より堅牢なモジュール読み込み機能が必要な場合は、require.jsがこの機能でうまく機能します。概要については、http ：//requirejs.org/docs/why.htmlをご覧ください。私はrequire.jsを特に遅延読み込みスクリプトモジュールに使用しています。

于 2012-07-16T21:43:11.480 に答える
1

（タグ付けしたように）jQueryを使用すると、非常に簡単です。

$.getScript('/script.js', function() {
    foo.bar();
});
于 2012-07-16T21:43:50.450 に答える
0

これを行うには、いくつかの異なる方法があります...ライブラリを介して、または「手動で」、いわば、ブラウザAPIとストレートJavaScriptのみを使用します。JSでのみこれを行う方法についての回答は、Stoyanの投稿を参照してガイダンスを提供してください。unload基本的に、その要点は、スクリプトとonreadystatechangeプロパティの両方にイベントハンドラーを設定し、readyStateが「ロード」または「完了」（存在する場合）かどうかを確認することです。次のようになります。

var done = false;
newScript.onload = newScript.onreadystatechange = function () {
    if (!done && (!newScript.readyState || newScript.readyState === "loaded" || newScript.readyState === "complete)) {
        done = true;
        // run your actual code here
    }
};
于 2012-07-16T21:42:22.457 に答える