實現js檔案動態載入程式碼例項

antzone發表於2017-04-06
JS

在很多專案中，我們可能需要根據實際需要來決定載入哪一個js檔案。

而不是一股腦的將所有的js檔案都載入完畢，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function loadScript(url){
  var script = document.createElement('script'); 
  script.type = 'text/javascript';
  script.charset="utf-8";
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    var rn=Math.random();
    loadScript("http://www.softwhy.com/demo/js/js/js.js?rn="+rn);
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，點選按鈕可以動態載入並制定js檔案中的程式碼。

一.程式碼註釋:

（1）.function loadScript(url){}，引數是要載入的js檔案路徑。

（2）.var script = document.createElement('script')，建立一個script標籤。

（3）.script.type = 'text/javascript'，設定script的type屬性值。

（4）.script.charset="utf-8"，設定script的charset屬性值。

（5）.script.src = url，設定script的src屬性值。

（6）.document.getElementsByTagName('head')[0].appendChild(script)，將建立的script元素新增到head中。

（7）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（8）.var obt=document.getElementById("bt")，獲取按鈕物件。

（9）.obt.onclick=function(){}，為按鈕註冊click事件處理函式。

（10）.var rn=Math.random()，生成一個隨機數。

（11）.loadScript("http://www.softwhy.com/demo/js/js/js.js?rn="+rn)，之所以新增隨機數是為了防止快取。

二.相關閱讀:

（1）.document.createElement()可以參閱document.createElement()一章節。

（2）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（3）.appendChild()可以參閱js appendChild()一章節。

（4）.Math.random()可以參閱javascript Math.random()一章節。

相關文章