在网页里动态加载 js

2022年7月8日09:14:50

常见的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”这个脚本文件才会被加载到网页中执行。

  • 作者：weixin_33872660
  • 原文链接：https://blog.csdn.net/weixin_33872660/article/details/87960578
    更新时间：2022年7月8日09:14:50 ，共 826 字。