1. ホーム
  2. javascript

[解決済み] document.createElement("script") を同期的に実行する。

2023-04-13 13:56:49

質問

を呼び出すことは可能でしょうか? .js ファイルを同期的に呼び出して、その直後に使用することは可能ですか?

<script type="text/javascript">
    var head = document.getElementsByTagName('head').item(0);
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'http://mysite/my.js');
    head.appendChild(script);

    myFunction(); // Fails because it hasn't loaded from my.js yet.

    window.onload = function() {
        // Works most of the time but not all of the time.
        // Especially if my.js injects another script that contains myFunction().
        myFunction();
    };
</script>

これは簡略化されています。私の実装では、createElementのものは関数の中にあります。その関数に、制御を返す前に特定の変数がインスタンス化されているかどうかをチェックできるようなものを追加しようと思いました。しかし、そうすると、私がコントロールできない他のサイトからのjsを含むときにどうするかという問題が残ります。

感想は?

編集してください。

今のところ、何が起こっているのかをうまく説明してくれているので、ベストアンサーを受け入れました。しかし、もし誰かがこれを改善するための提案を持っているならば、私はそれを受け入れることができます。以下は、私がやりたいことの一例です。

// Include() is a custom function to import js.
Include('my1.js');
Include('my2.js');

myFunc1('blarg');
myFunc2('bleet');

私はただ、内部を知りすぎずに、「このモジュールを使いたいので、このモジュールのコードを使います」と言えるようにしたいだけなのです。

どのように解決するのですか?

このような場合は <script> 要素に "onload" ハンドラを追加すると、スクリプトが読み込まれてブラウザによって評価されたときに呼び出されます。

var script = document.createElement('script');
script.onload = function() {
  alert("Script loaded and ready");
};
script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

同期では無理です。

編集

- において、IE が "load"イベントを発生させないことが指摘されています。 <script> タグがロード/評価されたときに "load"イベントを発生させないという指摘がありました。したがって、次に行うべきことは、XMLHttpRequest でスクリプトを取得し、次に eval() とすることでしょう。(あるいは、テキストを <script> タグの実行環境は eval() の実行環境はローカルスコープの影響を受けるので、必ずしも思い通りになるわけではありません)。

編集 - 2013年初頭現在 のような、より堅牢なスクリプト読み込みツールを検討することを強くお勧めします。 Requirejs . 心配するような特殊なケースはたくさんあります。本当に単純な状況には yepnope がありますが、これは現在 モダニズル .