JavaScript動態(tài)插入script的基本思路及實現(xiàn)函數(shù)
更新時間：2013年11月11日 17:33:21 作者：
偶爾需要動態(tài)插入javascript代碼的需求，基本思路是動態(tài)創(chuàng)建一個script標簽，設置其src屬性，type屬性等，需要的朋友可以參考下
在日常的前端開發(fā)中，偶爾有需要動態(tài)插入javascript代碼的需求，基本思路是：
1、動態(tài)創(chuàng)建一個script標簽，設置其src屬性，type屬性等
2、將script節(jié)點插入頁面，加載js文件
即相當于將<script type="text/javascript" src="xxx.js"></script>添加到了頁面，只不過這個過程是動態(tài)完成的，為此特意封裝了一個函數(shù)來實現(xiàn)：
// 動態(tài)插入script標簽
function createScript(url, callback){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = url;
/*
** script標簽的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);
}
使用方法如：
createScript('xxx.js', function(){
console.log('OK');
});
1、動態(tài)創(chuàng)建一個script標簽，設置其src屬性，type屬性等
2、將script節(jié)點插入頁面，加載js文件
即相當于將<script type="text/javascript" src="xxx.js"></script>添加到了頁面，只不過這個過程是動態(tài)完成的，為此特意封裝了一個函數(shù)來實現(xiàn)：
復制代碼 代碼如下:
// 動態(tài)插入script標簽
function createScript(url, callback){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.async = true;
oScript.src = url;
/*
** script標簽的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);
}
使用方法如：
復制代碼 代碼如下:
createScript('xxx.js', function(){
console.log('OK');
});
您可能感興趣的文章:
- 基于js里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別
- javascript獲取函數(shù)名稱、函數(shù)參數(shù)、對象屬性名稱的代碼實例
- js函數(shù)名與form表單元素同名沖突的問題
- js類中獲取外部函數(shù)名的方法與代碼
- js類中獲取外部函數(shù)名的方法
- 關于動態(tài)執(zhí)行代碼(js的Eval)實例詳解
- javascript中動態(tài)函數(shù)用法實例分析
- JS函數(shù)實現(xiàn)動態(tài)添加CSS樣式表文件
- 如何實現(xiàn)動態(tài)刪除javascript函數(shù)
- JavaScript 動態(tài)添加腳本，并觸發(fā)回調(diào)函數(shù)的實現(xiàn)代碼
- 如何用JavaScript動態(tài)呼叫函數(shù)(兩種方式)
- JS動態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
- 詳解js的事件處理函數(shù)和動態(tài)創(chuàng)建html標記方法
- javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
相關文章
JavaScript創(chuàng)建命名空間(namespace)的最簡實現(xiàn)
JavaScript創(chuàng)建命名空間(namespace)通過自定義函數(shù)進行類型判斷、數(shù)組遍歷、函數(shù)執(zhí)行等相關操作來實現(xiàn)命名空間的功能,需要的朋友可以參考一下2007-12-12
今天硬著頭皮去搞一段混淆過的js代碼，因為源碼丟了。。。 本來打算要在js引擎那一層去獲取代碼的，發(fā)現(xiàn)根本不需要。2009-01-01
JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解
js中事件監(jiān)聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用并且簡單,但在原生js中比較復雜,下面這篇文章主要給大家介紹了關于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關資料,需要的朋友可以參考下2023-05-05
javascript之textarea打字機效果提示代碼推薦
非常不錯的提示輸入內(nèi)容，動態(tài)的提示，給人親切感2008-09-09
這篇文章主要介紹了JS實現(xiàn)簡易換圖時鐘功能,結合實例形式分析了javascript結合時間函數(shù)定時變換顯示圖片實現(xiàn)時鐘功能的相關操作技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2018-01-01
JavaScript不使用prototype和new實現(xiàn)繼承機制
這篇文章主要介紹了JavaScript不使用prototype和new實現(xiàn)繼承機制的相關資料,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄猨s獲取頁面引用的css樣式表中的屬性值方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript 模塊化編程(筆記) ,需要的朋友可以參考下2015-04-04
javascript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型，本文給大家分享javascript實用方法二，感興趣的朋友一起學習吧2015-12-12
js實現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法
這篇文章主要介紹了js實現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法,實例分析了漸顯效果的實現(xiàn)要點與方法,非常具有實用價值,需要的朋友可以參考下2015-04-04