如何動(dòng)態(tài)加載外部Javascript文件
最近在網(wǎng)上找到了一個(gè)可以動(dòng)態(tài)加載js文件的js加載器,具體代碼如下:
JsLoader.js
var MiniSite=new Object(); /** * 判斷瀏覽器 */ MiniSite.Browser={ ie:/msie/.test(window.navigator.userAgent.toLowerCase()), moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), opera:/opera/.test(window.navigator.userAgent.toLowerCase()), safari:/safari/.test(window.navigator.userAgent.toLowerCase()) }; /** * JsLoader對(duì)象用來加載外部的js文件 */ MiniSite.JsLoader={ /** * 加載外部的js文件 * @param sUrl 要加載的js的url地址 * @fCallback js加載完成之后的處理函數(shù) */ load:function(sUrl,fCallback){ var _script=document.createElement('script'); _script.setAttribute('charset','gbk'); _script.setAttribute('type','text/javascript'); _script.setAttribute('src',sUrl); document.getElementsByTagName('head')[0].appendChild(_script); if(MiniSite.Browser.ie){ _script.onreadystatechange=function(){ if(this.readyState=='loaded'||this.readyStaate=='complete'){ //fCallback(); if(fCallback!=undefined){ fCallback(); } } }; }else if(MiniSite.Browser.moz){ _script.onload=function(){ //fCallback(); if(fCallback!=undefined){ fCallback(); } }; }else{ //fCallback(); if(fCallback!=undefined){ fCallback(); } } } };
JsLoader.js測(cè)試
<!DOCTYPE HTML> <html> <head> <!--引入js加載器 --> <script type="text/javascript" src="js/JsLoader.js"></script> <title>JsLoaderTest.html</title> <script type="text/javascript"> if(MiniSite.Browser.ie){ //動(dòng)態(tài)加載Js MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){ alert("動(dòng)態(tài)加載的是jquery-1.9.1.js"); $(function(){ alert("jquery-1.9.1.js動(dòng)態(tài)加載完成之后做的處理操作"); }); }); }else{ MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){ alert("動(dòng)態(tài)加載的是jquery-2.0.3.js"); $(function(){ alert("jquery-2.0.3.js動(dòng)態(tài)加載完成之后做的處理操作"); }); }); } </script> </head> <body> </body> </html>
測(cè)試結(jié)果如下:
IE瀏覽器下測(cè)試結(jié)果:
google瀏覽器下的測(cè)試結(jié)果:
為大家分享的如何使用js加載器動(dòng)態(tài)加載外部Javascript文件,相信一定會(huì)對(duì)大家的學(xué)習(xí)有很大的幫助。
- 學(xué)習(xí)javascript文件加載優(yōu)化
- 理解Javascript文件動(dòng)態(tài)加載
- JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
- JS加載器如何動(dòng)態(tài)加載外部js文件
- 動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼
- 動(dòng)態(tài)加載js、css的實(shí)例代碼
- 動(dòng)態(tài)加載js文件簡(jiǎn)單示例
- jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
- js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總
- 不使用script導(dǎo)入js文件的幾種方法
- 動(dòng)態(tài)加載JavaScript文件的3種方式
相關(guān)文章
超級(jí)簡(jiǎn)單實(shí)現(xiàn)JavaScript MVC 樣式框架
本文給大家分享的是一則翻譯過來的,由國(guó)外友人寫的如何簡(jiǎn)單有效的實(shí)現(xiàn)javascript MVC樣式框架,算是一個(gè)MVC的入門教程,希望大家能夠喜歡。2015-03-03Javascript(AJAX)解析XML的代碼(兼容FIREFOX/IE)
Javascript AJAX 解析XML的代碼(兼容FIREFOX/IE)2010-07-07基于JavaScript實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01JavaScript判斷訪問的來源是手機(jī)還是電腦,用的哪種瀏覽器
這篇文章主要介紹了使用JavaScript判斷訪問的來源是手機(jī)還是電腦,用的哪種瀏覽器。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12Javascript?promise.all的用法介紹(簡(jiǎn)潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個(gè)Promise對(duì)象方法,可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise對(duì)象,最終返回一個(gè)數(shù)組,需要的朋友可以參考下2023-07-07