如何動態載入js檔案

antzone發表於2017-03-15
JS

在實際應用中，有時候需要動態載入js檔案，下面就簡單介紹一下如何實現此功能。

動態載入方式一:

[JavaScript] 純文字檢視 複製程式碼
function loadJs(file){
  var head = $("head").remove("script[role='reload']");
  $("<scri"+"pt>"+"</scr"+"ipt>").attr({ role:'reload',src:file,type:'text/javascript' }).appendTo(head);
}

動態載入方式二:

[JavaScript] 純文字檢視 複製程式碼
function reloadAbleJSFn(id,newJS){
  var oldjs=null; 
  var t=null; 
  var oldjs=document.getElementById(id); 
  if(oldjs) oldjs.parentNode.removeChild(oldjs); 
  var scriptObj=document.createElement("script"); 
  scriptObj.src=newJS; 
  scriptObj.type="text/javascript"; 
  scriptObj.id=id; 
  document.getElementsByTagName("head")[0].appendChild(scriptObj);
}

動態載入方式三:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function(){
  $('#loadButton').click(function(){
    $.getScript('new.js',function(){
      newFun('"Checking new script"');
    });
  });
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button>
</body>

相關文章