document.createElement（“ script”）を同期的に

.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は<script>ロード/評価中のタグに対して「ロード」イベントを発生させないことが指摘されています。したがって、次に行うことは、XMLHttpRequestを使用してスクリプトをフェッチし、eval()それを自分でフェッチすることだと思います。（または、<script>追加したタグにテキストを詰め込むと思います。の実行環境はeval()ローカルスコープの影響を受けるため、必ずしも希望どおりに動作するとは限りません。）

編集— 2013年の初めの時点で、Requirejsのようなより堅牢なスクリプト読み込みツールを検討することを強くお勧めします。心配する特別なケースがたくさんあります。本当に単純な状況では、yepnopeがあります。これは現在Modernizrに組み込まれています。

これはきれいではありませんが、機能します。

<script type="text/javascript">
  document.write('<script type="text/javascript" src="other.js"></script>');
</script>

<script type="text/javascript">
  functionFromOther();
</script>

または

<script type="text/javascript">
  document.write('<script type="text/javascript" src="other.js"></script>');
  window.onload = function() {
    functionFromOther();
  };
</script>

スクリプトは、別の<script>タグまたは前に含める必要がありますwindow.onload()。

これは機能しません：

<script type="text/javascript">
  document.write('<script type="text/javascript" src="other.js"></script>');
  functionFromOther(); // Error
</script>

Pointyが行ったように、ノードの作成でも同じことができますが、FFでのみ可能です。スクリプトが他のブラウザでいつ準備できるかは保証されません。

XML純粋主義者である私は、これが本当に嫌いです。しかし、それは予想通りに機能します。あなたはそれらの醜いものを簡単に包むことができるdocument.write()ので、あなたはそれらを見る必要はありません。テストを実行してノードを作成し、それを追加してからフォールバックすることもできますdocument.write()。

これはかなり遅いですが、これを実行したい人への将来の参照のために、以下を使用できます。

function require(file,callback){
    var head=document.getElementsByTagName("head")[0];
    var script=document.createElement('script');
    script.src=file;
    script.type='text/javascript';
    //real browsers
    script.onload=callback;
    //Internet explorer
    script.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            callback();
        }
    }
    head.appendChild(script);
}

少し前に短いブログ投稿をしましたhttp://crlog.info/2011/10/06/dynamically-requireinclude-a-javascript-file-into-a-page-and-be-notified-when-its -ロード済み/

非同期プログラミングは、要求を行った結果が要求ステートメントに従う代わりに関数にカプセル化されるため、少し複雑になります。ただし、サーバーやネットワークの速度が低下してもブラウザがクラッシュしたかのように動作することはないため、ユーザーエクスペリエンスのリアルタイムの動作は大幅に向上する可能性があります。同期プログラミングは無礼で あり、採用すべきではありません、人々が使用するアプリケーションでは使用し。

ダグラス・クロックフォード （YUIブログ）

さて、それはでこぼこの乗り物になるだろうので、あなたの席を締めなさい。ますます多くの人々がjavascriptを介して動的にスクリプトをロードすることについて質問します、それはホットな話題のようです。

これが非常に人気になった主な理由は次のとおりです。

• クライアント側のモジュール性
• より簡単な依存関係管理
• エラー処理
• パフォーマンス上の利点

モジュール性について：クライアント側の依存関係の管理は、クライアント側で正しく処理する必要があることは明らかです。特定のオブジェクト、モジュール、またはライブラリが必要な場合は、それを要求して動的にロードします。

エラー処理：リソースに障害が発生した場合でも、影響を受けるスクリプトに依存する部分のみをブロックするか、少し遅れてもう一度試してみる機会があります。

パフォーマンスはWebサイト間の競争力になり、検索ランキングの要素になりました。動的スクリプトで実行できるのは、ブラウザーがスクリプトを処理するデフォルトのブロック方法とは対照的に、非同期動作を模倣することです。スクリプトは他のリソースをブロックし、スクリプトはHTMLドキュメントのさらなる解析をブロックし、スクリプトはブロックしますしはUIをします。動的スクリプトタグとそのクロスブラウザの代替手段を使用すると、実際の非同期リクエストを実行し、依存コードが利用可能な場合にのみ実行できます。スクリプトは他のリソースと並行して読み込まれ、レンダリングは完璧になります。

一部の人々が同期スクリプトに固執する理由は、彼らがそれに慣れているからです。彼らはそれがデフォルトの方法であり、より簡単な方法であると考えており、それが唯一の方法であると考える人さえいるかもしれません。

ただし、アプリケーションの設計に関してこれを決定する必要がある場合に注意する必要があるのは、エンドユーザーエクスペリエンスだけです。そして、この分野では非同期を打ち負かすことはできません。ユーザーは即座に応答を受け取り（または約束を言います）、約束は常に何もないよりも優れています。空白の画面は人々を怖がらせます。開発者は、知覚されるパフォーマンスを向上させるために怠惰であってはなりません。

そして最後に、汚い面についてのいくつかの言葉。ブラウザ間で機能させるために何をすべきか：

1. 非同期的に考えることを学ぶ
2. コードをモジュール化するように整理する
3. エラーやエッジケースを適切に処理するようにコードを整理する
4. 徐々に強化する
5. 常に適切な量のフィードバックに注意してください

上記の答えは私を正しい方向に向けました。これが私が働いたものの一般的なバージョンです：

  var script = document.createElement('script');
  script.src = 'http://' + location.hostname + '/module';
  script.addEventListener('load', postLoadFunction);
  document.head.appendChild(script);

  function postLoadFunction() {
     // add module dependent code here
  }      

この質問に対する既存の回答（および他のスタックオーバーフロースレッドでのこの質問のバリエーション）には、次の問題がありました。

• ロードされたコードはどれもデバッグ可能ではありませんでした
• 多くのソリューションでは、真にブロックするのではなく、ロードがいつ終了したかを知るためにコールバックが必要でした。つまり、ロードされた（つまりロード中の）コードをすぐに呼び出すと実行エラーが発生します。

または、もう少し正確に：

• ロードされたコードはどれもデバッグ可能ではありませんでした（ソリューションがスクリプト要素をdomに追加した場合に限り、HTMLスクリプトタグブロックを除いて、個別の表示可能なスクリプトとしては決してありません） =>ロードする必要のあるスクリプトの数を考えると（およびデバッグ）、これは受け入れられませんでした。
• 'onreadystatechange'または 'onload'イベントを使用するソリューションはブロックに失敗しました。これは、コードが元々 'require（[filename、' dojo / domReady ']）;'を使用して動的スクリプトを同期的にロードしたため、大きな問題でした。そして私は道場を取り除いていました。

戻る前にスクリプトをロードし、デバッガーですべてのスクリプトに適切にアクセスできるようにする（少なくともChromeの場合）私の最終的な解決策は次のとおりです。

警告：次のコードは、おそらく「開発」モードでのみ使用する必要があります。 （「リリース」モードの場合、動的スクリプトをロードせずに、または少なくともevalを使用せずに、事前パッケージ化と縮小を行うことをお勧めします）。

//Code User TODO: you must create and set your own 'noEval' variable

require = function require(inFileName)
{
    var aRequest
        ,aScript
        ,aScriptSource
        ;

    //setup the full relative filename
    inFileName = 
        window.location.protocol + '//'
        + window.location.host + '/'
        + inFileName;

    //synchronously get the code
    aRequest = new XMLHttpRequest();
    aRequest.open('GET', inFileName, false);
    aRequest.send();

    //set the returned script text while adding special comment to auto include in debugger source listing:
    aScriptSource = aRequest.responseText + '\n////# sourceURL=' + inFileName + '\n';

    if(noEval)//<== **TODO: Provide + set condition variable yourself!!!!**
    {
        //create a dom element to hold the code
        aScript = document.createElement('script');
        aScript.type = 'text/javascript';

        //set the script tag text, including the debugger id at the end!!
        aScript.text = aScriptSource;

        //append the code to the dom
        document.getElementsByTagName('body')[0].appendChild(aScript);
    }
    else
    {
        eval(aScriptSource);
    }
};

function include(file){
return new Promise(function(resolve, reject){
        var script = document.createElement('script');
        script.src = file;
        script.type ='text/javascript';
        script.defer = true;
        document.getElementsByTagName('head').item(0).appendChild(script);

        script.onload = function(){
        resolve()
        }
        script.onerror = function(){
          reject()
        }
      })

 /*I HAVE MODIFIED THIS TO  BE PROMISE-BASED 
   HOW TO USE THIS FUNCTION 

  include('js/somefile.js').then(function(){
  console.log('loaded');
  },function(){
  console.log('not loaded');
  })
  */
}

これは、動的スクリプト読み込みの適切な概要のように見えます：http： //unixpapa.com/js/dyna.html

私は自分のWebサイトに複数の.jsファイルがあり、それらが互いに依存していることに慣れています。それらをロードし、依存関係が正しい順序で評価されるようにするために、すべてのファイルをロードし、それらがすべて受信されると、eval()それらをロードする関数を作成しました。主な欠点は、これがCDNでは機能しないためです。このようなライブラリ（jQueryなど）の場合は、静的に含めることをお勧めします。HTMLにスクリプトノードを動的に挿入しても、少なくともChromeではスクリプトが正しい順序で評価されるとは限らないことに注意してください（これがこの関数を作成する主な理由でした）。

function xhrs(reqs) {
  var requests = [] , count = [] , callback ;

  callback = function (r,c,i) {
    return function () {
      if  ( this.readyState == 4 ) {
        if (this.status != 200 ) {
          r[i]['resp']="" ;
        } 
        else {
          r[i]['resp']= this.responseText ;
        }
        c[0] = c[0] - 1 ;
        if ( c[0] == 0 ) {
          for ( var j = 0 ; j < r.length ; j++ ) {
            eval(r[j]['resp']) ;
          }
        }
      }
    }
  } ;
  if ( Object.prototype.toString.call( reqs ) === '[object Array]' ) {
    requests.length = reqs.length ;
  }
  else {
    requests.length = 1 ;
    reqs = [].concat(reqs);
  }
  count[0] = requests.length ;
  for ( var i = 0 ; i < requests.length ; i++ ) {
    requests[i] = {} ;
    requests[i]['xhr'] = new XMLHttpRequest () ;
    requests[i]['xhr'].open('GET', reqs[i]) ;
    requests[i]['xhr'].onreadystatechange = callback(requests,count,i) ;
    requests[i]['xhr'].send(null);
  }
}

配列（カウント用）を作成せずに同じ値を参照する方法がわかりません。そうでなければ、それは自明だと思います（すべてがロードされたとき、eval()すべてのファイルが指定された順序で、それ以外の場合は応答を保存するだけです）。

使用例：

xhrs( [
       root + '/global.js' ,
       window.location.href + 'config.js' ,
       root + '/js/lib/details.polyfill.min.js',
       root + '/js/scripts/address.js' ,
       root + '/js/scripts/tableofcontents.js' 
]) ;

皮肉なことに、私はあなたが欲しいものを持っていますが、あなたが持っていたものに近いものが欲しいです。

私は物事を動的かつ非同期にロードしていloadますが、そのようなコールバックを使用しています（dojoとxmlhtpprequestを使用）

  dojo.xhrGet({
    url: 'getCode.php',
    handleAs: "javascript",
    content : {
    module : 'my.js'
  },
  load: function() {
    myFunc1('blarg');
  },
  error: function(errorMessage) {
    console.error(errorMessage);
  }
});

詳細な説明については、こちらをご覧ください

問題は、行のどこかでコードが評価され、コードに問題がある場合、console.error(errorMessage);ステートメントはeval()実際のエラーではなく、の行を示すことです。これは、私が実際に<script>ステートメントに変換しようとしているような大きな問題です（ここを参照してください）。

これは、async / awaitとfetchをサポートする最新の「常緑」ブラウザで機能します。

この例は、エラー処理なしで簡略化されており、動作中の基本的なプリンシパルを示しています。

// This is a modern JS dependency fetcher - a "webpack" for the browser
const addDependentScripts = async function( scriptsToAdd ) {

  // Create an empty script element
  const s=document.createElement('script')

  // Fetch each script in turn, waiting until the source has arrived
  // before continuing to fetch the next.
  for ( var i = 0; i < scriptsToAdd.length; i++ ) {
    let r = await fetch( scriptsToAdd[i] )

    // Here we append the incoming javascript text to our script element.
    s.text += await r.text()
  }

  // Finally, add our new script element to the page. It's
  // during this operation that the new bundle of JS code 'goes live'.
  document.querySelector('body').appendChild(s)
}

// call our browser "webpack" bundler
addDependentScripts( [
  'https://code.jquery.com/jquery-3.5.1.slim.min.js',
  'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'
] )