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

<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

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