動態載入JS檔方法總結

這次帶給大家動態載入JS檔案方法總結，動態載入JS檔案的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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

實作方式:

複製程式碼 程式碼如下：

document.writeln("");

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

二、使用jQuery

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

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

三、使用原生js方法

原理：動態創建script標籤，並指定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');
 });

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

推薦閱讀：

webpack myproject建置專案時ip無法存取應如何處理

this指向與call、apply使用

webpack vue專案開發環境區域網路綁定IP方法

以上是動態載入JS檔方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！