日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 前端技术 > javascript >内容正文

javascript

动态加载JS脚本的4种方法

發(fā)布時(shí)間:2025/3/15 javascript 21 豆豆
生活随笔 收集整理的這篇文章主要介紹了 动态加载JS脚本的4种方法 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
動(dòng)態(tài)加載JS腳本的4種方法 2006-12-04 15:33

要實(shí)現(xiàn)動(dòng)態(tài)加載JS腳本有4種方法:

1、直接document.write

<script?language="javascript">

????document.write("<script?src='test.js'><//script>");

</script>

?

2、動(dòng)態(tài)改變已有script的src屬性

<script?src=''?id="s1"></script>

<script?language="javascript">

????s1.src="test.js"

</script>

?

3、動(dòng)態(tài)創(chuàng)建script元素

<script>

????var?oHead?=?document.getElementsByTagName('HEAD').item(0);

????var?oScript=?document.createElement("script");

????oScript.type?=?"text/javascript";

????oScript.src="test.js";

????oHead.appendChild(?oScript);

</script>

?

  這三種方法都是異步執(zhí)行的,也就是說(shuō),在加載這些腳本的同時(shí),主頁(yè)面的腳本繼續(xù)運(yùn)行,如果用以上的方法,那下面的代碼將得不到預(yù)期的效果。

要?jiǎng)討B(tài)加載的JS腳本:a.js,以下是該文件的內(nèi)容。

var?str?=?"中國(guó)";

alert(?"這是a.js中的變量:"?+?str?);

?



主頁(yè)面代碼:



<script?language="JavaScript">

function?LoadJS(?id,?fileUrl?)

{

?? ?var?scriptTag?=?document.getElementById(?id?);?

????var?oHead?=?document.getElementsByTagName('HEAD').item(0);

?? ?var?oScript=?document.createElement("script");



?? ?if?(?scriptTag??)?oHead.removeChild(?scriptTag??);?

????oScript.id?=?id;?

??? oScript.type?=?"text/javascript";?

????oScript.src=fileUrl?;?

??? oHead.appendChild(?oScript);?

}



LoadJS(?"a.js"?);



alert(?"主頁(yè)面動(dòng)態(tài)加載a.js并取其中的變量:"?+?str?);

</script>

上述代碼執(zhí)行后 a.js 的 alert 執(zhí)行并彈出消息,

?

但是 主頁(yè)面產(chǎn)生了錯(cuò)誤,沒(méi)有彈出對(duì)話框。原因是 'str' 未定義,為什么呢?因?yàn)橹黜?yè)面在取 str 的時(shí)候 a.js 并沒(méi)有完全加載成功。遇到需要同步執(zhí)行腳本的時(shí)候,可以用下面的第四種方法。

4、原理:用XMLHTTP取得要腳本的內(nèi)容,再創(chuàng)建 Script 對(duì)象。

注意:a.js必須用UTF8編碼保存,要不會(huì)出錯(cuò)。因?yàn)榉?wù)器與XML使用UTF8編碼傳送數(shù)據(jù)。

主頁(yè)面代碼:

<script?language="JavaScript">

function?GetHttpRequest()

{

??? if?(?window.XMLHttpRequest?)?//?Gecko

??????? return?new?XMLHttpRequest()?;

??? else?if?(?window.ActiveXObject?)?//?IE?

??????? return?new?ActiveXObject("MsXml2.XmlHttp")?;

}



function?AjaxPage(sId,?url){

??? var?oXmlHttp?=?GetHttpRequest()?;



??? oXmlHttp.OnReadyStateChange?=?function()??

????{?

??????? if?(?oXmlHttp.readyState?==?4?)?

??????? {

??????????? if?(?oXmlHttp.status?==?200?||?oXmlHttp.status?==?304?)?

??????????? {

??????????????? IncludeJS(?sId,?url,?oXmlHttp.responseText?);

??????????? }?

????????????else?

????????????{?

????????????????alert(?'XML?request?error:?'?+?oXmlHttp.statusText?+?'?('?+?oXmlHttp.status?+?')'?)?;?

????????????}?

??????? }?

??? }?



??? oXmlHttp.open('GET',?url,?true);?

??? oXmlHttp.send(null);

}



function?IncludeJS(sId,?fileUrl,?source)

{?

??? if?(?(?source?!=?null?)?&&?(?!document.getElementById(?sId?)?)?){?

??????? var?oHead?=?document.getElementsByTagName('HEAD').item(0);?

??????? var?oScript?=?document.createElement(?"script"?);?



??????? oScript.language?=?"javascript";?

??????? oScript.type?=?"text/javascript";?

??????? oScript.id?=?sId;?

??????? oScript.defer?=?true;?

??????? oScript.text?=?source;?



??????? oHead.appendChild(?oScript?);?

??? }

}



AjaxPage(?"scrA",?"b.js"?);



alert(?"主頁(yè)面動(dòng)態(tài)加載JS腳本。");

alert(?"主頁(yè)面動(dòng)態(tài)加載a.js并取其中的變量:"?+?str?);

</script>

現(xiàn)在完成了一個(gè)JS腳本的動(dòng)態(tài)加載。

var?Rash=true;
var?msg="";
function?norash()
{
if?(confirm("確定要取消嗎"))
Rash=false;
}
?function?rashit()
{
setInterval('getrss()',Inttime);
}
function?getrss()
{
????????if?(Rash==true)
????????{
????????head=document.getElementsByTagName('head').item(0);
????????script=document.createElement('script');
????????script.src='INCLUDE/AutoUpdate.asp';
????????script.type='text/javascript';
????????script.defer=true;
????????void(head.appendChild(script));
????????window.status=msg;
????????}
}
rashit();

總結(jié)

以上是生活随笔為你收集整理的动态加载JS脚本的4种方法的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。