在网页里动态加载 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脚本文件单独加载。这样作的好处是，好比可减小没必要要的js脚本文件的加载，以提升网页浏览器的速度。

js代码：

效果：

点击按钮以后，执行js代码片断。