在網頁裏動態加載 js

時間 2019-11-21

標籤網頁動態加載欄目 HTML 简体版

原文原文鏈接

常見的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的DOM對象，而後，爲它配置好腳本的地址和類型，最後把它掛載到網頁的頭部，也就是head部分。只有當用戶單擊「OK」按鈕以後，「my.js」這個腳本文件纔會被加載到網頁中執行。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。