動態加載 js 文件以及判斷 js 加載完成
常用的動態加載js文件有以下幾種方式:
1.直接document.write
document.write("<script src='test.js'><\/script>");
2.動態創建script元素
var loadJS = function(jsUrl){
var _doc = document.getElementsByTagName('head').item(0),
script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',jsUrl);
_doc.appendChild(script);
};
loadJS("https://cdn.bootcss.com/angular.js/1.6.6/angular.js");
3.預留一個script標簽,然後動態改變src
這幾種方法都是異步執行的,也就是說,在加載這些腳本的同時,主頁麵的腳本繼續運行,如果用以上的方法,那下麵的代碼將得不到預期的效果。
比如現在需要動態加載a.js,並拿到其中的str的值,a.js如下:
var str = "我是str的值";
console.log("我是a.js中的:"+str)
主頁麵js:
//loadJS()略
loadJS("a.js");
console.log( "主頁麵動態加載a.js並取其中的變量:" + str );
上述代碼執行後a.js中的console執行並輸出正確內容,但是主頁麵的console產生了錯誤,原因是str is not defined,為什麽呢?因為主頁麵在取str的時候a.js並沒有完全加載成功。在有些情況下就需要等待a.js加載完成後才能進一步的操作,所以可以使用下麵的方法來解決:
var dynamicLoad = function(jsUrl,fn){
var _doc = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',jsUrl);
_doc.appendChild(script);
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
fn();
}
script.onload = script.onreadystatechange = null;
}
};
dynamicLoad('a.js',function(){
console.log("加載完成啦!!!"+str);
});
相關說明:
1、VIP會員無限製任意下載,免積分。立即前往開通>>
2、下載積分可通過日常 簽到、綁定郵箱 以及 積分兌換 等途徑獲得!
3、本站資源大多存儲在雲盤,如出現鏈接失效請評論反饋,如有密碼,均為:www.ipipn.com。
4、所有站內資源僅供學習交流使用。未經原版權作者許可,禁止用於任何商業環境,否則後果自負。為尊重作者版權,請購買正版作品。
5、站內資源來源於網絡公開發表文件或網友分享,如侵犯您的權益,請聯係管理員處理。
6、本站提供的源碼、模板、軟件工具等其他資源,都不包含技術服務,請大家諒解!
7、源碼、模板等資源會隨著技術、壞境的升級而存在部分問題,還請慎重選擇。
PS.源碼均收集自網絡,如有侵犯閣下權益,請發信件至: admin@ipipn.com .
源站網 » 動態加載 js 文件以及判斷 js 加載完成