ホームページ > 記事 > ウェブフロントエンド > js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ

js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ

WBOYオリジナル: 2016-05-16 15:34:111197ブラウズ

この記事の例では、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 は 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();

ここでは、IE8 以前を除くすべてのブラウザがこの方法をサポートしているため、最初に標準の DOM テキストノード方法を試してください。このコード行でエラーがスローされた場合は、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() に同じ文字列を渡すことと同じです。ただし、ここでは文字列形式のコードしか使用できず、ユーザーは通常、loadScriptAddress("package.js") の形式でメソッドを提供したいと考えているため、引き続き議論する必要があります。

メソッド 5: XMLHttpRequest/ActiveXObject の非同期読み込み

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

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置script的id为yy
      ajaxPage("yy","package.js");
      //此方法为package.js里面的方法，此处执行方法成功
      functionOne();
    }
    function ajaxPage(sId,url)
    {
      var oXmlHttp = getHttpRequest();
      oXmlHttp.onreadystatechange = function()
      {
        //4代表数据发送完毕
        if ( oXmlHttp.readyState == 4 )
        {
          //0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
          if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
          {
            includeJS(sId,oXmlHttp.responseText);
          }
          else
          {
          }
        }
      }
      oXmlHttp.open("GET",url,true);
      oXmlHttp.send(null);
    }
    function getHttpRequest()
    {
      if(window.ActiveXObject)//IE
      {
        return new ActiveXObject("MsXml2.XmlHttp");
      }
      else if(window.XMLHttpRequest)//其他
      {
        return new XMLHttpRequest();
      }
    }
    function includeJS(sId,source)
    {
      if((source != null)&&(!document.getElementById(sId)))
      {
        var myHead = document.getElementsByTagName("HEAD").item(0);
        var myScript = document.createElement( "script" );
        myScript.language = "javascript";
        myScript.type = "text/javascript";
        myScript.id = sId;
        try{
          myScript.appendChild(document.createTextNode(source));
        }
        catch (ex){
          myScript.text = source;
        }
        myHead.appendChild( myScript );
      }
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，不过是异步加载，也没法运行functionOne，第二次就可以运行了，但是可惜的是在IE、Firefox、Safari下可以运行，在Opera、Chrome下会出错，Chrome下的错误如下：

不过只要发布之后在Chrome和Opera下就不会出现错误了。

其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加载

在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

/**
 * 同步加载js脚本
 * @param id  需要设置的<script>标签的id
 * @param url  js文件的相对路径或绝对路径
 * @return {Boolean}  返回是否加载成功，true代表成功，false代表失败
 */
function loadJS(id,url){
  var xmlHttp = null;
  if(window.ActiveXObject)//IE
  {
    try {
      //IE6以及以后版本中可以使用
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      //IE5.5以及以后版本可以使用
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
  {
    xmlHttp = new XMLHttpRequest();
  }
  //采用同步加载
  xmlHttp.open("GET",url,false);
  //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
  xmlHttp.send(null);
  //4代表数据发送完毕
  if ( xmlHttp.readyState == 4 )
  {
    //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
    if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
    {
      var myHead = document.getElementsByTagName("HEAD").item(0);
      var myScript = document.createElement( "script" );
      myScript.language = "javascript";
      myScript.type = "text/javascript";
      myScript.id = id;
      try{
        //IE8以及以下不支持这种方式，需要通过text属性来设置
        myScript.appendChild(document.createTextNode(xmlHttp.responseText));
      }
      catch (ex){
        myScript.text = xmlHttp.responseText;
      }
      myHead.appendChild( myScript );
      return true;
    }
    else
    {
      return false;
    }
  }
  else
  {
    return false;
  }
}

此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

在同一个文件夹下面创建一个function7.html，代码如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置script的id为yy
      loadJs("yy","package.js",callbackFunction);
    }
    function callbackFunction()
    {
      functionOne();
    }
    function loadJs(sid,jsurl,callback){
      var nodeHead = document.getElementsByTagName('head')[0];
      var nodeScript = null;
      if(document.getElementById(sid) == null){
        nodeScript = document.createElement('script');
        nodeScript.setAttribute('type', 'text/javascript');
        nodeScript.setAttribute('src', jsurl);
        nodeScript.setAttribute('id',sid);
        if (callback != null) {
          nodeScript.onload = nodeScript.onreadystatechange = function(){
            if (nodeScript.ready) {
              return false;
            }
            if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
              nodeScript.ready = true;
              callback();
            }
          };
        }
        nodeHead.appendChild(nodeScript);
      } else {
        if(callback != null){
          callback();
        }
      }
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。

希望本文所述对大家JavaScript程序设计有所帮助。

声明：

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

前の記事：ボタンをクリックしてページの高さを取得するJSメソッド_javascriptスキル次の記事：ボタンをクリックしてページの高さを取得するJSメソッド_javascriptスキル

続きを見る

js_javascriptスキルでスクリプトを動的に読み込む方法例まとめ

関連記事