快捷導(dǎo)航

JavaScript動態(tài)插入script的基本思路及實現(xiàn)函數(shù)

更新時間：2013年11月11日 17:33:21 作者：

偶爾需要動態(tài)插入javascript代碼的需求，基本思路是動態(tài)創(chuàng)建一個script標(biāo)簽，設(shè)置其src屬性，type屬性等，需要的朋友可以參考下

在日常的前端開發(fā)中，偶爾有需要動態(tài)插入javascript代碼的需求，基本思路是：

1、動態(tài)創(chuàng)建一個script標(biāo)簽，設(shè)置其src屬性，type屬性等

2、將script節(jié)點插入頁面，加載js文件

即相當(dāng)于將<script type="text/javascript" src="xxx.js"></script>添加到了頁面，只不過這個過程是動態(tài)完成的，為此特意封裝了一個函數(shù)來實現(xiàn)：

復(fù)制代碼代碼如下:

 
// 動態(tài)插入script標(biāo)簽 
function createScript(url, callback){ 
var oScript = document.createElement('script'); 
oScript.type = 'text/javascript'; 
oScript.async = true; 
oScript.src = url; 
/* 
** script標(biāo)簽的onload和onreadystatechange事件 
** IE6/7/8支持onreadystatechange事件 
** IE9/10支持onreadystatechange和onload事件 
** Firefox/Chrome/Opera支持onload事件 
*/ 

// 判斷IE8及以下瀏覽器 
var isIE = !-[1,]; 
if(isIE){ 
alert('IE') 
oScript.onreadystatechange = function(){ 
if(this.readyState == 'loaded' || this.readyState == 'complete'){ 
callback(); 
} 
} 
} else { 
// IE9及以上瀏覽器，F(xiàn)irefox，Chrome，Opera 
oScript.onload = function(){ 
callback(); 
} 
} 
document.body.appendChild(oScript); 
} 

使用方法如：

復(fù)制代碼代碼如下:

 
createScript('xxx.js', function(){ 
console.log('OK'); 
}); 

您可能感興趣的文章:

相關(guān)文章

JavaScript 字符串常用操作小結(jié)(非常實用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取，查找類的方法，對js字符串操作相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別實例分析【 5 個區(qū)別】
這篇文章主要介紹了JS箭頭函數(shù)和常規(guī)函數(shù)之間的區(qū)別,結(jié)合實例形式分析了JS箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別與相關(guān)使用注意事項,需要的朋友可以參考下
2020-05-05
JavaScript中隨機數(shù)方法?Math.random()
這篇文章主要介紹了JavaScript中隨機數(shù)方法?Math.random()，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-06-06
JS實現(xiàn)DOM刪除節(jié)點操作示例
這篇文章主要介紹了JS實現(xiàn)DOM刪除節(jié)點操作,結(jié)合實例形式分析了javascript使用removeChild()操作頁面dom節(jié)點刪除功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
Web3.js查詢以太幣和代幣余額及轉(zhuǎn)賬
這篇文章主要介紹了Web3.js查詢以太幣和代幣余額以及轉(zhuǎn)賬,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-09-09
layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn)
今天小編就為大家分享一篇layui.tree組件的使用以及搜索節(jié)點功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
js中的異步獲取到的數(shù)據(jù)到底能不能賦值給一個全局變量問題
這篇文章主要介紹了js中的異步獲取到的數(shù)據(jù)到底能不能賦值給一個全局變量問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
JavaScript屏蔽Backspace鍵的實現(xiàn)代碼
這篇文章主要介紹了JavaScript屏蔽Backspace鍵的實現(xiàn)代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2017-11-11
驗證手機號碼的JS方法分享
這篇文章介紹了驗證手機號碼的JS方法，有需要的朋友可以參考一下
2013-09-09
微信小程序?qū)崿F(xiàn)小型計算器
這篇文章主要為大家詳細
介紹了微信小程序?qū)崿F(xiàn)小型計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09