快捷導(dǎo)航

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

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

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

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

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

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

即相當(dāng)于將<script type="text/javascript" src="xxx.js"></script>添加到了頁面，只不過這個(gè)過程是動態(tài)完成的，為此特意封裝了一個(gè)函數(shù)來實(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創(chuàng)建命名空間(namespace)的最簡實(shí)現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過自定義函數(shù)進(jìn)行類型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關(guān)操作來實(shí)現(xiàn)命名空間的功能,需要的朋友可以參考一下
2007-12-12
解javascript 混淆加密收藏
今天硬著頭皮去搞一段混淆過的js代碼，因?yàn)樵创a丟了。。。本來打算要在js引擎那一層去獲取代碼的，發(fā)現(xiàn)根本不需要。
2009-01-01
JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解
js中事件監(jiān)聽就是利用addEventListener來綁定一個(gè)事件,這個(gè)用法在jquery中非常常用并且簡單,但在原生js中比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關(guān)資料,需要的朋友可以參考下
2023-05-05
javascript之textarea打字機(jī)效果提示代碼推薦
非常不錯的提示輸入內(nèi)容，動態(tài)的提示，給人親切感
2008-09-09
JS實(shí)現(xiàn)簡易換圖時(shí)鐘功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)簡易換圖時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript結(jié)合時(shí)間函數(shù)定時(shí)變換顯示圖片實(shí)現(xiàn)時(shí)鐘功能的相關(guān)操作技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下
2018-01-01
JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制
這篇文章主要介紹了JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制的相關(guān)資料,需要的朋友可以參考下
2014-12-12
js獲取頁面引用的css樣式表中的屬性值方法(推薦)
下面小編就為大家?guī)硪黄猨s獲取頁面引用的css樣式表中的屬性值方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
JavaScript 模塊化編程(筆記)
這篇文章主要介紹了JavaScript 模塊化編程(筆記) ,需要的朋友可以參考下
2015-04-04
分享Javascript實(shí)用方法二
javascript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型，本文給大家分享javascript實(shí)用方法二，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法,實(shí)例分析了漸顯效果的實(shí)現(xiàn)要點(diǎn)與方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04