实现原理
模仿百度统计的代码,将其封装成一个可重用的函数
<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>
// 动态导入script function importScript(src) { var hm = document.createElement("script"); hm.src = src; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); }
实现示例
静态服务器
$ pnpm i http-server # 开启静态服务器 $ npx http-server -p 5500 -c-1
文件目录
$ tree . ├── index.html ├── js │ └── hello.js └── script.js
index.html
<!-- 引入js --> <script src="./script.js"></script>
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"); })();
js/hello.js
console.log('Hello'); // 导入成功后控制台输出:Hello
访问:http://127.0.0.1:5500/index.html
即可看到控制台输出的内容