この例は、JSを動的にロードする方法をまとめたものです。参照のためにそれを共有してください。詳細は次のとおりです。
方法1:直接document.write(非同期)
次のようにコードをコピーします:<スクリプト言語= "javascript">
document.write( "<script src = 'res/extwidget/echarts/xx.js'> <// script>");
</script>
この方法は非同期負荷であるため、document.writeはインターフェイスを書き直しますが、これは明らかに実用的ではありません
方法2:既存のスクリプトのSRC属性を動的に変更する(非同期)
次のようにコードをコピーします。<スクリプトsrc = '' id = "xx"> </script>
<スクリプト言語= "javascript">
xx.src = "test.js"
</script>
この方法は、インターフェイス要素を変更せず、インターフェイス要素を書き換えませんが、非同期にロードされます
方法3:スクリプト要素を動的に作成する(非同期)
次のようにコードをコピーします:<script>
var body = document.getElementsByTagname( 'body')。[0];
var script = document.createelement( "script");
script.type = "text/javascript";
script.src = "xx.js";
Body.AppendChild(OScript);
</script>
2番目の方法と比較して、この方法の利点は、最初にインターフェイスにスクリプトタグを作成する必要がないことです。欠点は非同期負荷です
方法4:XMLHTTPREQUEST/ActiveXObjectロード(非同期)
次のようにコードをコピーします:/**
* JSスクリプトの非同期負荷
* @paramID設定する必要がある<script>タグのID
* @param url相対またはJSファイルへの絶対パス
*/
loadjs:function(id、url){
var xmlhttp = null;
if(window.activexobject){// ie
試す {
// 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);
xmlhttp.onreadystatechange = function(){
// 4は、データが送信されたことを意味します
if(xmlhttp.readystate == 4){
// 0はアクセスされたローカルエリアで、200〜300はサーバーへのアクセスが成功することを意味します。
// 304は、アクセスが変更なしでキャッシュであることを意味します
if((xmlhttp.status> = 200 && xmlhttp.status <300)|| xmlhttp.status == 0 || xmlhttp.status == 304){
var mybody = document.getElementsByTagname( "body")[0];
var myscript = document.createelement( "script");
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = id;
試す{
// IE8および以下はこの方法をサポートしておらず、テキスト属性を介して設定する必要があります
myscript.appendChild(document.createTextNode(xmlhttp.responsetext));
} catch(ex){
myscript.text = xmlhttp.responsetext;
}
mybody.appendchild(myscript);
}
}
}
//非同期負荷を使用しました
xmlhttp.open( "get"、url、true);
xmlhttp.send(null);
}
オープンでfalseへの設定は、同期荷重を意味します。同期荷重では、onreadystatechangeイベントの設定は必要ありません
これらの4つの方法は非同期に実行されます。つまり、これらのスクリプトをロードしながら、メインページのスクリプトは実行され続けます。
方法5:XMLHTTPREQUEST/ActiveXObjectロード(同期)
次のようにコードをコピーします:/**
* JSスクリプトの同期ロード
* @paramID設定する必要がある<script>タグのID
* @param url相対またはJSファイルへの絶対パス
* @return {boolean}それが正常にロードされるかどうかを返します、真は成功を意味し、偽は失敗を意味します
*/
loadjs:function(id、url){
var xmlhttp = null;
if(window.activexobject){// ie
試す {
// 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 mybody = document.getElementsByTagname( "body")[0];
var myscript = document.createelement( "script");
myscript.language = "javascript";
myscript.type = "text/javascript";
myscript.id = id;
試す{
// IE8および以下はこの方法をサポートしておらず、テキスト属性を介して設定する必要があります
myscript.appendChild(document.createTextNode(xmlhttp.responsetext));
} catch(ex){
myscript.text = xmlhttp.responsetext;
}
mybody.appendchild(myscript);
trueを返します。
}それ以外{
falseを返します。
}
}それ以外{
falseを返します。
}
}
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。