在網頁裡動態載入 js

哆來咪er發表於2017-05-13
網頁JS

常見的js動態載入技術之一是把一些邏輯獨立的js指令碼檔案單獨載入。這樣做的好處是，比如可減少不必要的js指令碼檔案的載入，以提高網頁瀏覽器的速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態載入js</title>
    <script type="text/javascript">
        //動態載入js檔案--my.js
        function loadJs(){
            //得到html的頭部dom
            var theHead = document.getElementsByTagName('head').item(0);
            //建立指令碼的dom物件例項
            var myScript = document.createElement('script');
            myScript.src = './my.js';            //指定指令碼路徑
            myScript.type = 'text/javascript';    //指定指令碼型別
            myScript.defer = true;                //程式下載完後再解析和執行
            theHead.appendChild(myScript);        //把dom掛載到頭部
        }
    </script>
</head>
<body style="text-align:center">
    <p>
        <input type="button" value="動態載入JS" onclick="loadJs()"/>
    </p>
</body>
</html>複製程式碼

js程式碼：

var test = function(){
    alert("動態載入js檔案");
}
test();複製程式碼

效果：

在網頁裡動態載入 js
這裡寫圖片描述

點選按鈕之後，執行js程式碼片段。

解析：本例採用動態建立的方式來動態載入js，這是較為合理的一種方式。首先，建立一個js的DOM物件，然後，為它配置好指令碼的地址和型別，最後把它掛載到網頁的頭部，也就是head部分。只有當使用者單擊“OK”按鈕之後，“my.js”這個指令碼檔案才會被載入到網頁中執行。

相關文章