js_javascriptスキルを動的にロードする方法のまとめ

この記事の例は、js を動的にロードする方法をまとめたものです。皆さんの参考に共有してください。詳細は以下の通りです。

方法 1: 直接 document.write (非同期)

コードをコピーします コードは次のとおりです。

");

このメソッドは非同期ロードであるため、document.write はインターフェースを書き換えますが、これは明らかに実用的ではありません

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

コードをコピー コードは次のとおりです:

このメソッドはインターフェイス要素を変更したり、インターフェイス要素を書き換えたりしませんが、非同期的にロードされます 方法 3: スクリプト要素を動的に作成する (非同期)

コードをコピー コードは次のとおりです:<script></script>

var body= document.getElementsByTagName('BODY').[0]; var script= document.createElement("script"); Script.type = "テキスト/javascript"

Script.src="xx.js"; body.appendChild(oScript);


2 番目の方法と比較したこの方法の利点は、最初にインターフェイスに script タグを記述する必要がないことです。欠点は、非同期ロードであることです。

方法 4: XMLHttpRequest/ActiveXObject の読み込み (非同期)

コードをコピー

コードは次のとおりです:

/**
* js スクリプトを非同期でロードします
* @param id 設定する必要がある <script> タグの ID <br /> * @param url jsファイルの相対パスまたは絶対パス<br />*/<br /> loadJs:function(id,url){ <br /> <br /> var xmlHttp = null; if(window.ActiveXObject){//IE <br /> { <br /> を試してください //IE6 以降のバージョンで使用可能 <br /> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } キャッチ (e) { <br /> //IE5.5以降のバージョンでも利用可能 <br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }<br /> }else if(window.XMLHttpRequest){ <br /> //Firefox、Opera 8.0、Safari、Chrome <br /> xmlHttp = 新しい XMLHttpRequest(); }<br /> //同期読み込みを採用 <br /> xmlHttp.open("GET",url,false); // 同期リクエストを送信します、<br /> //ブラウザが Chrome または Opera の場合、実行する前にブラウザを解放する必要があります。解放しないとエラーが報告されます <br /> xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ <br /> //4 はデータが送信されたことを意味します <br /> if(xmlHttp.readyState == 4){ <br /> //0 はアクセスされているローカルエリア、200 ～ 300 はサーバーへのアクセスの成功を表します、<br /> //304 はキャッシュが変更されずにアクセスされることを意味します <br /> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br /> var myBody = document.getElementsByTagName("BODY")[0]; var myScript = document.createElement( "スクリプト" ); myScript. language = "javascript" <br />; myScript.type = "テキスト/javascript" <br />; myScript.id = id; 試してみてください{ <br /> //IE8 以前はこのメソッドをサポートしていないため、テキスト属性 <br /> を通じて設定する必要があります myScript.appendChild(document.createTextNode(xmlHttp.responseText)); }キャッチ (例){ <br /> myScript.text = xmlHttp.responseText; } <br /> myBody.appendChild(myScript); } <br /> }<br /> }<br /> //非同期読み込みを使用します <br /> xmlHttp.open("GET",url,true); xmlHttp.send(null); }<br /><br /> <br />open で false に設定すると、同期読み込みでは onreadystatechange イベントを設定する必要がなくなります。<br /> <br />これら 4 つのメソッドはすべて非同期で実行されます。つまり、これらのスクリプトをロードしている間、メイン ページのスクリプトは実行され続けます。 <br /> <br />方法 5: XMLHttpRequest/ActiveXObject の読み込み (同期)<br /> <br /><br /><br /><br />コードをコピー<br /><br /></script>

コードは次のとおりです:

/**
* Synchronously load js script
* @param id The id of the <script> tag that needs to be set <br /> * @param url Relative path or absolute path of js file <br /> * @return {Boolean} Returns whether the loading is successful, true represents success, false represents failure <br />*/ <br /> loadJs:function(id,url){ <br />  <br /> var xmlHttp = null; <br /> if(window.ActiveXObject){//IE <br /> Try { <br /> //Can be used in IE6 and later versions <br /> xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); <br /> } catch (e) { <br /> //IE5.5 and later versions can be used <br /> xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); <br /> }  <br /> }else if(window.XMLHttpRequest){ <br /> //Firefox, Opera 8.0, Safari, Chrome <br /> xmlHttp = new XMLHttpRequest(); <br /> } <br /> //Use synchronous loading <br /> xmlHttp.open("GET",url,false); <br /> //Send a synchronous request. If the browser is Chrome or Opera, it must be published before running, otherwise an error will be reported <br /> xmlHttp.send(null); <br /> //4 means the data has been sent <br /> if(xmlHttp.readyState == 4){ <br /> //0 is the local accessed, 200 to 300 means the access to the server is successful, 304 means the cache is accessed without modification <br /> If((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){ <br /> var myBody = document.getElementsByTagName("BODY")[0]; <br /> var myScript = document.createElement( "script" ); <br /> myScript.language = "javascript"; <br /> myScript.type = "text/javascript"; <br /> myScript.id = id; <br /> try{ <br /> //IE8 and below do not support this method and need to be set through the text attribute <br /> myScript.appendChild(document.createTextNode(xmlHttp.responseText)); <br /> }catch (ex){ <br /> myScript.text = xmlHttp.responseText; <br /> }  <br /> myBody.appendChild(myScript); <br /> Return true; <br /> }else{ <br /> Return false; <br /> }  <br /> }else{ <br /> Return false; <br /> } <br /> }</script>

I hope this article will be helpful to everyone’s JavaScript programming design.