js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ-jsチュートリアル-php.cn

この記事の例では、js でスクリプトを動的に読み込む方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

最近、同社のフロントエンドマップ製品はモジュールに分割する必要があり、ユーザーが使用する機能に応じてどのモジュールをロードするかによって、ユーザーエクスペリエンスが向上することが期待されています。

そこで、js 動的スクリプトの読み込みを研究するためにあらゆる場所を検索しましたが、本当に悲しいです。 , インターネット上にはほぼ同じ記事が存在する、4つの方法私は他人の結果をコピーし、元の記事へのリンクを追加しない人を嫌います。なぜ！重要なのは、最後の方法はまだ少し間違っているということです。 2日間の調査と情報を経て、ここで皆さんと共有したいと思います。

まず、js ファイルをロードする必要があります。これを開いた後、その中に functionOne メソッドを記述します。

function functionOne(){
  alert("成功加载");
}

ログイン後にコピー

後続の html ファイルはすべて同じディレクトリに作成されます。

方法 1: 直接 document.write

次のコードを使用して、同じフォルダーに function1.html を作成します:

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

ログイン後にコピー

document.write を通じてページにスクリプトを書き込むことができます。コードに示されているように、「Initial Load」ボタンをクリックした後に package.js ファイルをロードできますが、メソッド functionOne をすぐに実行するとロードできません。このメソッドは Report Error を見つけることができませんでしたが、2 番目のボタン (document.write によって動的に作成された「Test Running Effect」) をクリックすると、この時点でスクリプトが読み込まれていることがわかりました。このメソッドは非同期ロードであるため (次のコードの実行を継続しながら、ロードする必要があるスクリプトを実行するために追加のスレッドが開かれます)、document.write によってインターフェイスが書き換えられますが、これは明らかに実用的ではありません。

方法 2: 既存のスクリプトの src 属性を動的に変更する

次のコードを使用して、同じフォルダーに function2.html を作成します:

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

ログイン後にコピー

このメソッドの利点は、インターフェイス要素を変更せず、インターフェイス要素を書き換えないことです。ただし、非同期でロードされるため、同じ問題が発生します。

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

次のコードを使用して、同じフォルダーに 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 番目の方法と比較したこの方法の利点は、最初にインターフェイスに script タグを記述する必要がないことです。欠点は、非同期ロードと同じ問題です。

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

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

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

方法 4: スクリプト要素を動的に作成する (同期)

次のコードを使用して、同じフォルダーに 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 は

人気のチュートリアル

詳細>