如何讓動態(tài)插入的javascript腳本代碼跑起來。
更新時間:2007年01月09日 00:00:00 作者:
首先,聲明方法很多種,直接間接的方法都有,只羅列一般情況下的兩種模式:
假設(shè)我們要裝入的代碼是a.js:
var foo=function(){
document.write("I am a.js content foo() function by never-online");
};
一。直接插入src,這種方法簡單而直接,但有局限性,
1)
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
foo();
</script>
在如上的代碼放上head標簽內(nèi),執(zhí)行時大多數(shù)情況下是會出錯,信息為:錯誤:缺少對象
這是由于動態(tài)創(chuàng)建對象script時,則于a.js還沒有完全載入而導(dǎo)致的。執(zhí)行下面的代碼,你就可以發(fā)現(xiàn)原因了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>never-online dynamic code test page</title>
</head>
<body>
<pre>
readyState的含義
- uninitialized : 腳本對象剛被創(chuàng)建,腳本代碼未載入;
- loading : 腳本代碼載入中;
- loaded : 腳本代碼完成讀入,但尚未開始解釋執(zhí)行;
- interactive : 解釋執(zhí)行過程中;
- complete : 腳本已經(jīng)執(zhí)行完成。
</pre>
<div id="viewer"></div>
<script type="text/javascript">
window.onerror=function(msg,url,line){
document.getElementById("viewer").innerHTML+='<p style="color:red">錯誤:'+msg+'line:'+line+'</p>';
return true;
}
function bar(u) {
var x=document.createElement("SCRIPT");
x.src=u;
x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
}
bar("a.js");
(function getReadyState(){
var e=document.getElementById("viewer")
var x=true;
var a = document.getElementsByTagName("SCRIPT");
for (var i=0; i<a.length; i++) {
if (a[i].readyState=='complete' && x!=false) x=true; else x=false
e.innerHTML+=(a[i].src?a[i].src+':':'noname:')+a[i].readyState+"<br />";
}
e.innerHTML+="<hr/>";
if (x) window.clearTimeout(window.timer); else
window.timer=window.setTimeout('getReadyState()',1000);
}());
foo();
</script>
<script type="text/javascript">
//<![CDATA[
foo();
//]]>
</script>
</body>
</html>
初始值為:
a.js:loading
noname:interactive
我們可以知道,a.js依然在loading狀態(tài),在執(zhí)行foo()當然是錯誤的。但下一個script標簽執(zhí)行中,a.js的readyState是complete了,所以可以執(zhí)行foo()的函數(shù)。由此,我推薦你可以簡單的這樣運用動態(tài)用生成script標簽方法來添加js的url。
解決方法如下
1)用window.setTimeout方法來執(zhí)行,估計a.js已經(jīng)載入完畢,才執(zhí)行a.js里的函數(shù)。這個方法仍然不保險
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
window.setTimeout('foo()',1000);
</script>
2)多加一個script標簽放置要執(zhí)行的代碼
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
</script>
<script>
//多一個script標簽來放置
//這里a.js的readyState已經(jīng)為complete了。
foo();
</script>
二、用XMLHttpRequest和window.execScript動態(tài)的執(zhí)行a.js,這個方法的優(yōu)點比較明顯,但效率可能有所下降,沒有測試,有興趣的朋友可以自己測試一下速度。
代碼如下:
<script language="javascript">
function bar(u) {
var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
x.open("GET",u,false);
x.send(null);
s=x.responseText;
try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致與IE的window.execScript方法功能相同
}
bar("a.js");
foo();
</script>
但這個方法仍有缺點,也就是a.js腳本中的代碼有中文的情況,如何處理?那就要經(jīng)常解碼了,而解碼恰恰是js的軟肋,如果運用vbs來解碼,那么兼容也就沒有了。要看自己具體的應(yīng)用了,我在neverModules里加載js包時用的就是window.execScript方法來解析代碼,這樣更可以配合js namespace的應(yīng)用
順便再加上解碼
<script type="text/javascript">
//<![CDATA[
function bar(u) {
var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
x.open("GET",u,false);
x.send(null);
s=parseScript(x.responseText);
try {window.execScript(s)}catch(ex){window.eval(s)};
}
function parseScript(jscode) {
// --- toCurrentCharset(), by aimingoo 解碼
window.execScript(''+
'Function Asc2Unicode(n) \n'+
' Asc2Unicode = Chr(n) \n'+
'End Function \n'+
'Function SafeArray2Str(body) \n'+
' SafeArray2Str = CStr(body)\n'+
'End Function','VBScript');
var r1 = /%u(..)(..)/g, r2 = /%([8,9,A-F].)%(..)/g;
var toUnicode = function($0, $1, $2) {return Asc2Unicode(parseInt($1+$2, 16))}
toCurrentCharset = function(body) {
return unescape(escape(SafeArray2Str(body)).replace(r1, "%$2%$1").replace(r2, toUnicode));
}; jscode=toCurrentCharset(jscode);
window.execScript(jscode, 'JavaScript'); //IE有效,vbs解碼
return jscode;
}
bar('a.js');
foo();
//]]>
</script>
不過大多數(shù)的情況下,第二種方法處理起來應(yīng)該沒有問題,如果要很嚴格的執(zhí)行的話,第一種方法還是有改進的代碼的,比如加載a.js的內(nèi)容,把本身的腳本再次解析再執(zhí)行,但復(fù)雜度就提高了,所以要有一個非常完美的解決方案,還需要更進一步來討論。
我就不寫這么多了,僅僅為一個提醒,還有一個拋磚引玉的作用。
假設(shè)我們要裝入的代碼是a.js:
var foo=function(){
document.write("I am a.js content foo() function by never-online");
};
一。直接插入src,這種方法簡單而直接,但有局限性,
1)
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
foo();
</script>
在如上的代碼放上head標簽內(nèi),執(zhí)行時大多數(shù)情況下是會出錯,信息為:錯誤:缺少對象
這是由于動態(tài)創(chuàng)建對象script時,則于a.js還沒有完全載入而導(dǎo)致的。執(zhí)行下面的代碼,你就可以發(fā)現(xiàn)原因了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>never-online dynamic code test page</title>
</head>
<body>
<pre>
readyState的含義
- uninitialized : 腳本對象剛被創(chuàng)建,腳本代碼未載入;
- loading : 腳本代碼載入中;
- loaded : 腳本代碼完成讀入,但尚未開始解釋執(zhí)行;
- interactive : 解釋執(zhí)行過程中;
- complete : 腳本已經(jīng)執(zhí)行完成。
</pre>
<div id="viewer"></div>
<script type="text/javascript">
window.onerror=function(msg,url,line){
document.getElementById("viewer").innerHTML+='<p style="color:red">錯誤:'+msg+'line:'+line+'</p>';
return true;
}
function bar(u) {
var x=document.createElement("SCRIPT");
x.src=u;
x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
}
bar("a.js");
(function getReadyState(){
var e=document.getElementById("viewer")
var x=true;
var a = document.getElementsByTagName("SCRIPT");
for (var i=0; i<a.length; i++) {
if (a[i].readyState=='complete' && x!=false) x=true; else x=false
e.innerHTML+=(a[i].src?a[i].src+':':'noname:')+a[i].readyState+"<br />";
}
e.innerHTML+="<hr/>";
if (x) window.clearTimeout(window.timer); else
window.timer=window.setTimeout('getReadyState()',1000);
}());
foo();
</script>
<script type="text/javascript">
//<![CDATA[
foo();
//]]>
</script>
</body>
</html>
初始值為:
a.js:loading
noname:interactive
我們可以知道,a.js依然在loading狀態(tài),在執(zhí)行foo()當然是錯誤的。但下一個script標簽執(zhí)行中,a.js的readyState是complete了,所以可以執(zhí)行foo()的函數(shù)。由此,我推薦你可以簡單的這樣運用動態(tài)用生成script標簽方法來添加js的url。
解決方法如下
1)用window.setTimeout方法來執(zhí)行,估計a.js已經(jīng)載入完畢,才執(zhí)行a.js里的函數(shù)。這個方法仍然不保險
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
window.setTimeout('foo()',1000);
</script>
2)多加一個script標簽放置要執(zhí)行的代碼
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
</script>
<script>
//多一個script標簽來放置
//這里a.js的readyState已經(jīng)為complete了。
foo();
</script>
二、用XMLHttpRequest和window.execScript動態(tài)的執(zhí)行a.js,這個方法的優(yōu)點比較明顯,但效率可能有所下降,沒有測試,有興趣的朋友可以自己測試一下速度。
代碼如下:
<script language="javascript">
function bar(u) {
var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
x.open("GET",u,false);
x.send(null);
s=x.responseText;
try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致與IE的window.execScript方法功能相同
}
bar("a.js");
foo();
</script>
但這個方法仍有缺點,也就是a.js腳本中的代碼有中文的情況,如何處理?那就要經(jīng)常解碼了,而解碼恰恰是js的軟肋,如果運用vbs來解碼,那么兼容也就沒有了。要看自己具體的應(yīng)用了,我在neverModules里加載js包時用的就是window.execScript方法來解析代碼,這樣更可以配合js namespace的應(yīng)用
順便再加上解碼
<script type="text/javascript">
//<![CDATA[
function bar(u) {
var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
x.open("GET",u,false);
x.send(null);
s=parseScript(x.responseText);
try {window.execScript(s)}catch(ex){window.eval(s)};
}
function parseScript(jscode) {
// --- toCurrentCharset(), by aimingoo 解碼
window.execScript(''+
'Function Asc2Unicode(n) \n'+
' Asc2Unicode = Chr(n) \n'+
'End Function \n'+
'Function SafeArray2Str(body) \n'+
' SafeArray2Str = CStr(body)\n'+
'End Function','VBScript');
var r1 = /%u(..)(..)/g, r2 = /%([8,9,A-F].)%(..)/g;
var toUnicode = function($0, $1, $2) {return Asc2Unicode(parseInt($1+$2, 16))}
toCurrentCharset = function(body) {
return unescape(escape(SafeArray2Str(body)).replace(r1, "%$2%$1").replace(r2, toUnicode));
}; jscode=toCurrentCharset(jscode);
window.execScript(jscode, 'JavaScript'); //IE有效,vbs解碼
return jscode;
}
bar('a.js');
foo();
//]]>
</script>
不過大多數(shù)的情況下,第二種方法處理起來應(yīng)該沒有問題,如果要很嚴格的執(zhí)行的話,第一種方法還是有改進的代碼的,比如加載a.js的內(nèi)容,把本身的腳本再次解析再執(zhí)行,但復(fù)雜度就提高了,所以要有一個非常完美的解決方案,還需要更進一步來討論。
我就不寫這么多了,僅僅為一個提醒,還有一個拋磚引玉的作用。
您可能感興趣的文章:
- JavaScript動態(tài)插入CSS的方法
- 深入理解javascript動態(tài)插入技術(shù)
- JavaScript動態(tài)插入script的基本思路及實現(xiàn)函數(shù)
- 得到文本框選中的文字,動態(tài)插入文字的js代碼
- Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)實例分析
- js自定義回調(diào)函數(shù)
- 談?wù)凧avaScript自定義回調(diào)函數(shù)
- js的回調(diào)函數(shù)詳解
- 告訴你什么是javascript的回調(diào)函數(shù)
- js中回調(diào)函數(shù)的學習筆記
- JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
相關(guān)文章
有關(guān)div頁面拖動、縮放、關(guān)閉、遮罩效果代碼
有關(guān)div頁面拖動、縮放、關(guān)閉、遮罩效果代碼,比較不錯,適合學習用。2009-08-08JavaScritp添加url參數(shù)并將參數(shù)加入到url中及更改url參數(shù)的方法
這篇文章給大家介紹javascript添加url參數(shù)方法,將參數(shù)加入到url中,涉及到url添加參數(shù)的相關(guān)知識,關(guān)于js添加url參數(shù)感興趣的朋友可以參考下本篇文章2015-10-10淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法,對算法感興趣的同學,可以參考下2021-05-05JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用詳解
這篇文章主要介紹了JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用,localStorage:永久存儲在本地,適合保存在本地的數(shù)據(jù)。sessionStorage:會話級的存儲,敏感帳號一次登陸2022-10-10javascript結(jié)合canvas實現(xiàn)圖片旋轉(zhuǎn)效果
圖片的旋轉(zhuǎn)可以說是一種效果,但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個范疇,其更具有使用性,功能性。照片有時候是需要橫過來的拍的,當我們預(yù)覽或共享到web上時需要進行旋轉(zhuǎn)。這個操作在以往可能更多的是交給軟件去完成,然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。2015-05-05