Vue动态引入JS文件实现方式
作者：工頁光軍
这篇文章主要介绍了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();
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。