動態(tài)加載js的方法匯總
本文實例匯總了動態(tài)加載js的方法。分享給大家供大家參考。具體如下:
方法一:直接document.write(異步)
document.write("<script src='res/extwidget/echarts/xx.js'><\/script>");
</script>
由于這種方式是異步加載,document.write會重寫界面,明顯不實用
方法二:動態(tài)改變已有script的src屬性(異步)
<script language="javascript">
xx.src="test.js"
</script>
此種方法不會改變界面元素,不重寫界面元素,但同樣是異步加載
方法三:動態(tài)創(chuàng)建script元素(異步)
var body= document.getElementsByTagName('BODY').[0];
var script= document.createElement("script");
script.type = "text/javascript";
script.src="xx.js";
body.appendChild( oScript);
</script>
此辦法的優(yōu)勢相對于第二種而言就是不需要最開始就在界面寫一個script標簽,缺點還是異步加載
方法四:XMLHttpRequest/ActiveXObject加載(異步)
* 異步加載js腳本
* @param id 需要設置的<script>標簽的id
* @param url js文件的相對路徑或絕對路徑
*/
loadJs:function(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);
//發(fā)送同步請求,
//如果瀏覽器為Chrome或Opera,必須發(fā)布后才能運行,不然會報錯
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
//4代表數(shù)據(jù)發(fā)送完畢
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;
try{
//IE8以及以下不支持這種方式,需要通過text屬性來設置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
}
}
}
//采用異步加載
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
open里面設置為false就是同步加載了,同步加載不需要設置onreadystatechange事件
這四種方法都是異步執(zhí)行的,也就是說,在加載這些腳本的同時,主頁面的腳本繼續(xù)運行。
方法五:XMLHttpRequest/ActiveXObject加載(同步)
* 同步加載js腳本
* @param id 需要設置的<script>標簽的id
* @param url js文件的相對路徑或絕對路徑
* @return {Boolean} 返回是否加載成功,true代表成功,false代表失敗
*/
loadJs:function(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);
//發(fā)送同步請求,如果瀏覽器為Chrome或Opera,必須發(fā)布后才能運行,不然會報錯
xmlHttp.send(null);
//4代表數(shù)據(jù)發(fā)送完畢
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;
try{
//IE8以及以下不支持這種方式,需要通過text屬性來設置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
return true;
}else{
return false;
}
}else{
return false;
}
}
希望本文所述對大家的javascript程序設計有所幫助。
- 如何實現(xiàn)JavaScript動態(tài)加載CSS和JS文件
- 使用jquery動態(tài)加載Js文件和Css文件
- 使用javaScript動態(tài)加載Js文件和Css文件
- JS動態(tài)加載當前時間的方法
- 使用jquery動態(tài)加載js文件的方法
- jquery動態(tài)加載js/css文件方法(自寫小函數(shù))
- 一個簡單的動態(tài)加載js和css的jquery代碼
- 使用jQuery動態(tài)加載js腳本文件的方法
- 動態(tài)加載js、css等文件跨iframe實現(xiàn)
- js 動態(tài)加載事件的幾種方法總結
- 動態(tài)加載dtree.js樹treeview(示例代碼)
- 異步動態(tài)加載JS并運行(示例代碼)
- js實現(xiàn)動態(tài)加載腳本的方法實例匯總
相關文章
javascript跨域總結之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
本文給大家介紹window.name實現(xiàn)的跨域數(shù)據(jù)傳輸,自己親自實踐了一下,真的非常好用,特此分享到腳本之家網站供大家參考2015-11-11js實現(xiàn)目錄鏈接,內容跟著目錄滾動顯示的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)目錄鏈接,內容跟著目錄滾動顯示的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10