js：动态导入script脚本文件

实现原理

模仿百度统计的代码，将其封装成一个可重用的函数

<script>
   var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?64ecd82404c51e03dc91cb9e8c025574";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

// 动态导入script
function importScript(src) {
  var hm = document.createElement("script");
  hm.src = src;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

实现示例

静态服务器

$ pnpm i http-server

# 开启静态服务器
$ npx http-server -p 5500 -c-1

  

 

  
1
  
2
  
3
  
4
 

文件目录

$ tree 
.
├── index.html
├── js
│   └── hello.js
└── script.js

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

index.html

<!-- 引入js -->
<script src="./script.js"></script>

  

 

  
1
  
2
 

script.js

// 动态导入script
function importScript(src) {
  var hm = document.createElement("script");
  hm.src = src;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}


(function () {
  importScript("/js/hello.js");
})();


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

js/hello.js

console.log('Hello');
// 导入成功后控制台输出：Hello

  

 

  
1
  
2
 

访问：http://127.0.0.1:5500/index.html

即可看到控制台输出的内容

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126949280