通过创建script标签来引入外部js

最新推荐文章于 2025-08-30 22:26:53 发布

原创最新推荐文章于 2025-08-30 22:26:53 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#script标签 #vue

本文探讨了如何通过创建script标签来动态引入外部JavaScript文件，并确保其加载完成后执行特定函数。对比了直接使用import方式引入JS可能存在的执行顺序问题，详细展示了使用onload事件监听脚本加载完成的方法。

通过创建script 标签再引入外部的js 可以等到引入的js 结束之后再执行函数，但是直接通过import的方式引入js的话可能无法控制是否js引入完成后再执行的函数顺序了

const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://xxxxx.js";
//  这个写法是获取到页面的body标签，向节点的子节点列表的末尾添加script
document.getElementsByTagName('body')[0].appendChild(script);
// 也有一种情况是获取dom结构然后再dom结构里面(开始的地方)加入script并引入js，再调用相应函数
const value = document.getElementById('container')
value .prepend(script)	
var that  = this;
script.onload = function() {
 // 执行相应的函数
 this.test()
}