JavaScript でのスクリプト要素インスタンスの同期および非同期の動的作成の詳細な説明-jsチュートリアル-php.cn

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

伊谢尔伦

リリース： 2017-07-21 15:21:04

オリジナル

2631 人が閲覧しました

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

同じフォルダーの下に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 は

著者別の最新記事