首頁 > web前端 > js教程 > 主體

動態載入JS檔案3種方式整理

php中世界最好的语言
發布: 2018-05-23 15:01:19
原創
1550 人瀏覽過

這次帶給大家動態載入JS檔案3種方式整理,動態載入JS檔案的注意事項有哪些,下面就是實戰案例,一起來看一下。

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

該種方式可以實作js檔案的動態加載,原理就是在重寫入文檔流,這種方式會導致整個頁面重繪。

實作方式:

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

需要注意的是特殊字元的轉義。

二、使用jQuery

使用getScript(url,callback)方法實作動態載入js檔案

$.getScript(&#39;test.js&#39;,function(){
 alert(&#39;done&#39;);
});
登入後複製

三、使用原生js方法

原理:動態建立script標籤,並指定script的src屬性

function loadJs(url,callback){
 var script=document.createElement(&#39;script&#39;);
 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(&#39;done&#39;);
 });
登入後複製

還可以使用同樣的原理動態載入css文件,只不過插入的的父節點是head標籤。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何動態引入JS檔案

#H5中​​data-*屬性使用方法匯總

怎麼實作JS同步、非同步、延遲載入

#

以上是動態載入JS檔案3種方式整理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板