ホームページ > 記事 > ウェブフロントエンド > JavaScript でのスクリプト要素インスタンスの同期および非同期の動的作成の詳細な説明

JavaScript でのスクリプト要素インスタンスの同期および非同期の動的作成の詳細な説明

伊谢尔伦オリジナル: 2017-07-21 15:21:042563ブラウズ

スクリプト要素を動的に作成する(非同期)

同じフォルダーの下にfunction3.htmlを作成します。コードは次のとおりです:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

2番目の方法と比較したこの方法の利点は、スクリプトを記述する必要がないことです。冒頭のインターフェースタグの欠点は非同期読み込みであり、これにも同じ問題があります。

これら 3 つのメソッドはすべて非同期で実行されるため、これらのスクリプトをロードしている間、メインページのスクリプトは実行され続けます。上記のメソッドが使用される場合、次のコードは期待どおりの効果を発揮しません。

しかし、functionOne の前にアラートを追加して、メインページスクリプトの実行をブロックすることができます。そうしないと、後のコードを別のボタンで実行する必要があることがわかります。一定時間後に次のコードを実行するタイマーを定義しますが、プロジェクト内でこれらのメソッドを使用することは確かに不可能です。

実際、3 番目のメソッドは、いくつかの変更を加えることで同期読み込みにすることができます。

スクリプト要素を動的に(同期的に)作成します

同じフォルダーの下にfunction4.htmlを作成します。コードは次のとおりです:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

このメソッドは外部のjsファイルをロードしませんが、myScriptにサブ項目を追加します。 Firefox、Safari、Chrome、Opera、および IE9 では、このコードは正常に動作します。ただし、IE8 以下のバージョンではエラーが発生します。 IE は 3f1c4e4b6b16bbbd69b2ee476dc4f83a を特別な要素として扱い、その子ノードへの DOM アクセスを許可しません。ただし、次の例のように、3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素の text 属性を使用して JS コードを作成できます:

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

このような変更後のコードは、IE、Firefox、Opera、Safari3 以降のバージョンで実行できます。 3.0 より前のバージョンの Safari では、テキスト属性は正しくサポートされていませんでしたが、テキストノードテクノロジを使用してコードを指定できました。以前のバージョンの Safari と互換性を持たせる必要がある場合は、次のコードを使用できます:

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

ここでは、まず標準の DOM テキストノードメソッドを試してください。これは、IE8 以下を除くすべてのブラウザがこのメソッドをサポートしているためです。このコード行でエラーが発生した場合は、IE8 以下であることを意味するため、text 属性を使用する必要があります。プロセス全体は次の関数で表すことができます:

function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

その後、このメソッドを他の場所で使用して、使用する必要があるコードをロードできます。実際、この方法でコードを実行することは、グローバル関数の eval() に同じ文字列を渡すことと同じです。

以上がJavaScript でのスクリプト要素インスタンスの同期および非同期の動的作成の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript ファイルの読み込み用にコードを最適化する方法の詳細な説明次の記事：JavaScript ファイルの読み込み用にコードを最適化する方法の詳細な説明

続きを見る