本文實例講述了js實作動態載入腳本的方法。分享給大家參考,具體如下:
最近公司的前端地圖產品需要做一下模組劃分,希望用戶用到哪一塊的功能再加載哪一塊的模組,這樣可以提高用戶體驗。
所以到處查資料研究js動態腳本的加載,不過真是讓人傷心啊! ,網路上幾乎都是同一篇文章,4種方法,討厭其中拷貝別人成果的人,也不加個原文的連結。哎!關鍵是最後一種方法還有點錯誤。經過兩天的研究查閱資料,在這裡和大家分享一下。
首先我們需要一個被載入的js文件,我在一個固定資料夾下建立了一個package.js,打開後在裡面寫一個方法functionOne,很簡單,程式碼如下:
function functionOne(){ alert("成功加载"); }
後面的html檔案都建立在同一個目錄下。
方法一:直接document.write
在同一個資料夾下方建立一個function1.html,程式碼如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { //加载js脚本 document.write("<script src='package.js'><\/script>"); //加载一个按钮 document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>"); //如果马上使用会找不到,因为还没有加载进来,此处会报错 functionOne(); } function operation() { //可以运行,显示“成功加载” functionOne(); } </script> </head> <body> <input type="button" value="初始化加载" onclick="init()"/> </body> </html>
透過document.write的方式可以往頁面寫入腳本,如程式碼所示,點擊按鈕「初始化載入」後可以載入package.js文件,但立即運行裡面的方法functionOne會找不到此方法,報告錯誤,而點擊第二個按鈕(透過document.write動態建立的「測試運行效果」)發現可以執行,此時腳本已經載入完畢了。由於這種方式是非同步載入(一邊繼續後面的程式碼,一邊額外開一個執行緒執行需要載入的腳本),並且document.write會重寫介面,明顯不實用。
方法二:動態改變已有script的src屬性
在同一個資料夾下方建立一個function2.html,程式碼如下:
<html> <head> <title></title> <script type="text/javascript" id="yy" src=""></script> <script type="text/javascript"> function init() { yy.src = "package.js"; //如果马上使用会找不到,因为还没有加载进来,此处会报错 functionOne(); } function operation() { //可以运行,显示“成功加载” functionOne(); } </script> </head> <body> <input type="button" value="测试按钮" onclick="init()"/> <input type="button" value="测试运行效果" onclick="operation()"/> </body> </html>
此種方法的好處是不會改變介面元素,不至於重寫介面元素,但是同樣是非同步加載,會有同樣的問題。
方法三:動態建立script元素(非同步)
在同一個資料夾下方建立一個function3.html,程式碼如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var myScript= document.createElement("script"); myScript.type = "text/javascript"; myScript.src="package.js"; document.body.appendChild(myScript); //如果马上使用会找不到,因为还没有加载进来 functionOne(); } function operation() { //可以运行,显示“成功加载” functionOne(); } </script> </head> <body> <input type="button" value="测试按钮" onclick="init()"/> <input type="button" value="测试运行效果" onclick="operation()"/> </body> </html>
此辦法的優勢相對於第二種而言就是不需要最開始就在介面寫一個script標籤,缺點還是非同步加載,存在同樣的問題。
這三種方法都是非同步執行的,所以在載入這些腳本的同時,主頁面的腳本繼續運行,如果用以上的方法,那下面的程式碼將不會得到預期的效果。
不過可以在functionOne前面加一個alert就可以堵塞一下主頁面腳本的運行,然後你發現functionOne就可以運行了,或者你的後期代碼需要在另一個按鈕下執行,一步一步的來,要么就定義一個計時器,在固定時間後再執行後面的程式碼,不過在專案裡面絕對不可能使用這些方法。
其實第三種方法改一點就變成同步載入了。
方法四:動態建立script元素(同步)
在同一個資料夾下方建立一個function4.html,程式碼如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { var myScript= document.createElement("script"); myScript.type = "text/javascript"; myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }")); document.body.appendChild(myScript); //此处发现可以运行 functionOne(); } </script> </head> <body> <input type="button" value="测试按钮" onclick="init()"/> </body> </html>
此方法並沒有載入外部的js文件,而是為myScript添加了子項。在Firefox、Safari、Chrome、Opera和IE9中,這些程式碼可以正常運作。但是在IE8以及以下的版本會導致錯誤。 IE將<script>視為一個特殊的元素,不允許DOM存取其子節點。不過可以用<script>元素的text屬性來制定js程式碼,想下面的例子這樣:</script>
var myScript= document.createElement("script"); myScript.type = "text/javascript"; myScript.text = "function functionOne(){alert(\"成功运行\"); }"; document.body.appendChild(myScript); //此处可以运行 functionOne();
經過這樣修改後的程式碼可以在IE、Firefox、Opera和Safari3及之後版本中運作。 Safari3.0之前的版本雖然無法正確支援text屬性,但卻允許使用文字節點技術來指定程式碼。如果需要相容早期版本的Safari,可以使用下面程式碼:
var myScript= document.createElement("script"); myScript.type = "text/javascript"; var code = "function functionOne(){alert(\"成功运行\"); }"; try{ myScript.appendChild(document.createTextNode(code)); } catch (ex){ myScript.text = code; } document.body.appendChild(myScript); //此处发现可以运行 functionOne();
這裡,首先嘗試標準的DOM文字節點方法,因為除了IE8以及以下,所有瀏覽器都支援這種方式。如果這行程式碼拋出了錯誤,那麼表示是IE8以及以下,所以就必須使用text屬性了。整個過程可以用以下函數來表示:
function loadScriptString(code) { var myScript= document.createElement("script"); myScript.type = "text/javascript"; try{ myScript.appendChild(document.createTextNode(code)); } catch (ex){ myScript.text = code; } document.body.appendChild(myScript); }
然後你可以在其他地方使用此方法來載入需要使用的程式碼。實際上,這樣執行程式碼與在全域作用於中把相同字串傳遞給eval()是一樣的。但我們這裡只能使用字串形式的程式碼,也有局限性,使用者一般希望提供的方法形狀如loadScriptAddress("package.js")的方式,所以我們還需要繼續討論。
方法五:XMLHttpRequest/ActiveXObject非同步載入
在同一個資料夾下方建立一個function5.html,程式碼如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { //加载package.js文件,设置script的id为yy ajaxPage("yy","package.js"); //此方法为package.js里面的方法,此处执行方法成功 functionOne(); } function ajaxPage(sId,url) { var oXmlHttp = getHttpRequest(); oXmlHttp.onreadystatechange = function() { //4代表数据发送完毕 if ( oXmlHttp.readyState == 4 ) { //0为访问的本地,200代表访问服务器成功,304代表没做修改访问的是缓存 if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304) { includeJS(sId,oXmlHttp.responseText); } else { } } } oXmlHttp.open("GET",url,true); oXmlHttp.send(null); } function getHttpRequest() { if(window.ActiveXObject)//IE { return new ActiveXObject("MsXml2.XmlHttp"); } else if(window.XMLHttpRequest)//其他 { return new XMLHttpRequest(); } } function includeJS(sId,source) { if((source != null)&&(!document.getElementById(sId))) { var myHead = document.getElementsByTagName("HEAD").item(0); var myScript = document.createElement( "script" ); myScript.language = "javascript"; myScript.type = "text/javascript"; myScript.id = sId; try{ myScript.appendChild(document.createTextNode(source)); } catch (ex){ myScript.text = source; } myHead.appendChild( myScript ); } } </script> </head> <body> <input type="button" value="测试按钮" onclick="init()"/> </body> </html>
ActiveXObject只有IE里面才有,其他浏览器大部分支持XMLHttpRequest,通过此办法我们可以实现动态加载脚本了,不过是异步加载,也没法运行functionOne,第二次就可以运行了,但是可惜的是在IE、Firefox、Safari下可以运行,在Opera、Chrome下会出错,Chrome下的错误如下:
不过只要发布之后在Chrome和Opera下就不会出现错误了。
其实这里把open里面设置为false就是同步加载了,同步加载不需要设置onreadystatechange事件。
方法六:XMLHttpRequest/ActiveXObject同步加载
在这里我把一些情况考虑在内,写成了一个方法,封装为loadJS.js,方便以后直接调用,代码如下:
/** * 同步加载js脚本 * @param id 需要设置的<script>标签的id * @param url js文件的相对路径或绝对路径 * @return {Boolean} 返回是否加载成功,true代表成功,false代表失败 */ function loadJS(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); //发送同步请求,如果浏览器为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 myHead = document.getElementsByTagName("HEAD").item(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; } myHead.appendChild( myScript ); return true; } else { return false; } } else { return false; } }
此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布,注释还是写的比较清楚的,以后需要加载某个js文件时,只需要一句话就行了,如loadJS("myJS","package.js")。方便实用。
如果想要实现不发布还非要兼容所有浏览器,至少我还没找出这样的同步加载的办法,我们只能通过异步加载开出回调函数来实现。
方法七:回调函数方式
在同一个文件夹下面创建一个function7.html,代码如下:
<html> <head> <title></title> <script type="text/javascript"> function init() { //加载package.js文件,设置script的id为yy loadJs("yy","package.js",callbackFunction); } function callbackFunction() { functionOne(); } function loadJs(sid,jsurl,callback){ var nodeHead = document.getElementsByTagName('head')[0]; var nodeScript = null; if(document.getElementById(sid) == null){ nodeScript = document.createElement('script'); nodeScript.setAttribute('type', 'text/javascript'); nodeScript.setAttribute('src', jsurl); nodeScript.setAttribute('id',sid); if (callback != null) { nodeScript.onload = nodeScript.onreadystatechange = function(){ if (nodeScript.ready) { return false; } if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') { nodeScript.ready = true; callback(); } }; } nodeHead.appendChild(nodeScript); } else { if(callback != null){ callback(); } } } </script> </head> <body> <input type="button" value="测试按钮" onclick="init()"/> </body> </html>
这种方式所有浏览器都支持,但是后面的代码必须放在回调函数里面,也就是异步加载了。看需求使用把!我还是比较喜欢第六种方法的。如果是异步加载的话,方法还有好几种,不过我的出发点是希望实现同步加载,这里就不对异步加载做总结了。
希望本文所述对大家JavaScript程序设计有所帮助。