javascript中動(dòng)態(tài)加載js文件多種解決辦法總結(jié)
一個(gè)比較全部在動(dòng)態(tài)加方法
/*
動(dòng)態(tài)加載js v1.0 by：dum
用法：src="webJsBase.js?load=a,b"
注：加載本目錄下js
*/
var webJsBase = {
require: function(libraryName) {
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
},
load: function(defaultLoad) {
if((typeof Prototype=='undefined')||(typeof Element == 'undefined')||(typeof Element.Methods=='undefined'))
throw ('prototype lib 加載失??！');
if(typeof defaultLoad=='undefined')defaultLoad='';
var js = /webJsBase.js(?.*)?$/;
$$('head script[src]').findAll(function(s) {
return s.src.match(js);
}).each(function(s) {
var path = s.src.replace(js, '');
var includes = s.src.match(/?.*load=([a-zA-Z0-9_,]*)/);
(includes ? includes[1] : defaultLoad).split(',').each(function(include) {
webJsBase.require(path + include + '.js');
});
});
}
};
webJsBase.load(); //這里參數(shù)可以指定默認(rèn)要加載的js文件
這是最簡單的方法在加載完后再利用直接document.write 如下圖。
<script language="javascript">
document.write("<script src='test.js'></script>");
</script>
給script加個(gè)id再去動(dòng)態(tài)改變已有script的src 屬性
<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>
這里利用getElementsByTagName('HEAD')動(dòng)態(tài)創(chuàng)建 script元素
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="test.js";
oHead.appendChild( oScript);
</script>
還可以這樣嘗試一下，自定一個(gè)函數(shù)
function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}
調(diào)用方法，這樣看上去就你php的include函數(shù)了
include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");
include(baseDir + "/model/MapModel.js");
include(baseDir + "/model/MapType.js");
include(baseDir + "/model/Tile.js");
還有朋友說可以使用ExtJs4 動(dòng)態(tài)加載js這里我就不介紹了，上面的方法足夠讓你實(shí)現(xiàn)動(dòng)態(tài)加載js了.
所以在采用這類方法動(dòng)態(tài)加載Js 的同時(shí)，主界面的Js腳本是繼續(xù)執(zhí)行的，所以可能出現(xiàn)通過異步加載的Js代碼得不到預(yù)期的效果的情況。
這時(shí)候可以考慮采用Ajax加載Js的方法。
- 動(dòng)態(tài)加載JS文件的三種方法
- jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
- 用ajax動(dòng)態(tài)加載需要的js文件
- 如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
- JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡單方式
- JS加載器如何動(dòng)態(tài)加載外部js文件
- 使用javaScript動(dòng)態(tài)加載Js文件和Css文件
- 理解javascript中的回調(diào)函數(shù)(callback)
- js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
- javascript 自定義回調(diào)函數(shù)示例代碼
- 原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
相關(guān)文章
不使用jquery實(shí)現(xiàn)js打字效果示例分享
js打字效果示例js打字效果示例,data-period設(shè)置從打字返回刪字的時(shí)間，data-rotate可加減中英文詞語，不用jquery支持2014-01-01
平移和縮放是查看圖像時(shí)常用的功能,我們可以放大圖像以查看更多細(xì)節(jié),進(jìn)行圖像編輯,Dynamsoft Document Viewer是一個(gè)用于此目的的SDK,它為文檔圖像提供了一組查看器,在本文中,我們將演示如何使用它來平移和縮放圖像,需要的朋友可以參考下2024-08-08
微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法淺析
這篇文章主要介紹了微信小程序填寫用戶頭像和昵稱實(shí)現(xiàn)方法，我們使用小程序往往能碰到提示允許獲取用戶頭像昵稱，這種功能怎么實(shí)現(xiàn)呢？本篇文章帶你探索2023-02-02
原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實(shí)現(xiàn)的ajax異步封裝功能,結(jié)合完整實(shí)例形式分析了原生javascript實(shí)現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了ES6新特性之模塊Module用法,簡要說明了模塊Module的概念、功能并結(jié)合實(shí)例形式分析了模塊Module的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
用js實(shí)現(xiàn)的檢測瀏覽器和系統(tǒng)的函數(shù)
檢測各種瀏覽器、系統(tǒng)的JS代碼2009-04-04
生成map對象的方法或許會(huì)有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2014-01-01
javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS嚴(yán)格模式原理與用法,結(jié)合實(shí)例形式分析了JS嚴(yán)格模式基本概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
單引號和雙引號之間可以相互嵌套。接下來通過本文給大家介紹JavaScript的單雙引號嵌套問題 ，感興趣的朋友一起看看吧2017-08-08