動(dòng)態(tài)加載JavaScript文件的3種方式

更新時(shí)間：2018年05月05日 11:26:44 作者：monster1935

第一種是使用document.write/writeln(）方式，第二種使用jQuery，第三種是使用原生js方法，感興趣的小伙伴們可以參考一下

以下是遇到的幾種動(dòng)態(tài)加載JavaScript文件的方式，持續(xù)更新中。。。

一、使用document.write/writeln(）方式

該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載，原理就是在重寫文檔流，這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面重繪。

實(shí)現(xiàn)方式:

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉(zhuǎn)義。

二、使用jQuery

使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件

$.getScript('test.js',function(){
 alert('done');
});

三、使用原生js方法

原理：動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并指定script的src屬性

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

還可以使用同樣的原理動(dòng)態(tài)加載css文件，只不過插入的的父節(jié)點(diǎn)是head標(biāo)簽。

以上就是動(dòng)態(tài)加載JavaScript文件的方法，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法示例
這篇文章主要介紹了JS手機(jī)端touch事件計(jì)算滑動(dòng)距離的方法,結(jié)合實(shí)例形式分析了javascript響應(yīng)手機(jī)端屏幕上touch事件計(jì)算滑動(dòng)距離的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
js控制文本框輸入的字符類型方法匯總
這篇文章主要給大家匯總介紹了js控制文本框輸入的字符類型的各種方法，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-06-06
可惡的ie8提示缺少id未定義
在頁(yè)面中循環(huán)添加到select中，但是在ie8中就一直提示缺少id未定義，經(jīng)測(cè)試發(fā)現(xiàn)數(shù)組的最后多了個(gè)逗號(hào)，把逗號(hào)去掉就好了
2014-03-03
bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了bootstrap側(cè)邊欄圓點(diǎn)導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JS仿百度搜索自動(dòng)提示框匹配查詢功能
這篇文章主要介紹了JS輸入框模糊匹配查詢功能，主要是仿百度搜索自動(dòng)提示框的功能，大家參考使用吧
2013-11-11
javascript 對(duì)象比較實(shí)現(xiàn)代碼
js對(duì)象比較實(shí)現(xiàn)代碼。
2009-04-04
Javascript類型系統(tǒng)之undefined和null淺析
這篇文章主要介紹了Javascript類型系統(tǒng)之undefined和null的知識(shí)，通過本文還簡(jiǎn)單給大家介紹了javascript中null和undefined的區(qū)別的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)卡片層疊滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
Javascript中toFixed計(jì)算錯(cuò)誤(依賴銀行家舍入法的缺陷)解決方法
這篇文章主要介紹了Javascript中toFixed計(jì)算錯(cuò)誤(依賴銀行家舍入法的缺陷)解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)，格式如4天7小時(shí)58分鐘39秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06