Vue動(dòng)態(tài)引入JS文件實(shí)現(xiàn)方式
更新時(shí)間：2026年05月31日 10:16:23 作者：工頁(yè)光軍
這篇文章主要介紹了Vue動(dòng)態(tài)引入JS文件實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
引入前請(qǐng)先
npm install jquery
正式代碼
//動(dòng)態(tài)引入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的
//動(dòng)態(tài)引入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();
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題
這篇文章主要介紹了Vite結(jié)合Vue刪除指定環(huán)境的console.log問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
淺談vuex的基本用法和mapaction傳值問(wèn)題
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
下面小編就為大家分享一篇vue2.0 路由不顯示router-view的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問(wèn)題
這篇文章主要介紹了Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue3中插槽(slot)的全部使用方法，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)
本文主要介紹了vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項(xiàng)目開發(fā),客戶覺(jué)得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級(jí)工具,允許開發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對(duì)象,本文詳細(xì)介紹了customRef()的使用場(chǎng)景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開發(fā)者更好地理解和使用這一強(qiáng)大功能2024-09-09
使用 Vite 打包 TypeScript 項(xiàng)目的實(shí)現(xiàn)步驟
Vite 提供了一種簡(jiǎn)單而高效的方式來(lái)構(gòu)建和打包TypeScript項(xiàng)目,通過(guò)上面的步驟,你可以快速設(shè)置并運(yùn)行一個(gè) Vite + TypeScript 的開發(fā)環(huán)境,下面就來(lái)詳細(xì)的了解一下2026-05-05
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04