Vue动态引入JS文件实现方式
更新时间：2026年05月31日 10:16:23 作者：工頁光軍
这篇文章主要介绍了Vue动态引入JS文件实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
引入前请先
npm install jquery
正式代码
//动态引入JS文件
function loadJavaScript(src, callback) {
let script_list=$("script[src]").toArray().map(ret=>{
return ret.src
})
if(script_list.indexOf(src)===-1){
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
script.charset = 'UTF-8';
script.src = src;
if (script.addEventListener) {
script.addEventListener('load', function () {
setTimeout(function () {
callback();
},500);
}, false);
} else if (script.attachEvent) {
script.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState == 'loaded') {
setTimeout(function () {
callback();
},500);
}
});
}
head.appendChild(script);
}else {
callback();
}
}不需要引入JQ的
//动态引入JS文件
function loadJavaScript(src, callback) {
let script_list=[]
document.querySelectorAll("script[src]").forEach(ret=>{ script_list.push(ret.src) })
if(script_list.indexOf(src)===-1){
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
script.type = 'text/javascript';
script.charset = 'UTF-8';
script.src = src;
if (script.addEventListener) {
script.addEventListener('load', function () {
setTimeout(function () {
callback();
},500);
}, false);
} else if (script.attachEvent) {
script.attachEvent('onreadystatechange', function () {
var target = window.event.srcElement;
if (target.readyState == 'loaded') {
setTimeout(function () {
callback();
},500);
}
});
}
head.appendChild(script);
}else {
callback();
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.js element-ui validate中代码不执行问题解决方法
这篇文章主要介绍了vue.js element-ui validate中代码不执行问题解决方法,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Vue替代marquee标签超出宽度文字横向滚动效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
vue3插槽:el-table表头插入tooltip及更换表格背景色方式
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue中 router.beforeEach() 的用法示例代码
导航守卫主要是通过跳转或取消的方式守卫导航,本文通过示例代码讲解vue中 router.beforeEach() 的用法,感兴趣的朋友跟随小编一起看看吧2023-12-12
VUE3中实现拖拽与缩放自定义看板vue-grid-layout详解
想实现桌面自由拖拽布局的效果,找到了vue-grid-layout栅格布局插件,可以完美解决,下面这篇文章主要给大家介绍了关于VUE3中实现拖拽与缩放自定义看板vue-grid-layout的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue+express生成token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了Vue列表渲染的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是这次总出问题,下面小编给大家分享element ui 添加自定义方法,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了vue长按事件touch,文末给大家补充介绍了Vue长按触摸事件的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
最新评论