javascript中動態(tài)加載js文件多種解決辦法總結(jié)
一個比較全部在動態(tài)加方法
/*
動態(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加個id再去動態(tài)改變已有script的src 屬性
<script src='' id="s1"></script>
<script language="javascript">
s1.src="test.js"
</script>
這里利用getElementsByTagName('HEAD')動態(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>
還可以這樣嘗試一下,自定一個函數(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 動態(tài)加載js這里我就不介紹了,上面的方法足夠讓你實現(xiàn)動態(tài)加載js了.
所以在采用這類方法動態(tài)加載Js 的同時,主界面的Js腳本是繼續(xù)執(zhí)行的,所以可能出現(xiàn)通過異步加載的Js代碼得不到預(yù)期的效果的情況。
這時候可以考慮采用Ajax加載Js的方法。
- 動態(tài)加載JS文件的三種方法
- jquery及js實現(xiàn)動態(tài)加載js文件的方法
- 用ajax動態(tài)加載需要的js文件
- 如何實現(xiàn)JavaScript動態(tài)加載CSS和JS文件
- JS 動態(tài)加載js文件和css文件 同步/異步的兩種簡單方式
- JS加載器如何動態(tài)加載外部js文件
- 使用javaScript動態(tài)加載Js文件和Css文件
- 理解javascript中的回調(diào)函數(shù)(callback)
- js 異步操作回調(diào)函數(shù)如何控制執(zhí)行順序
- javascript 自定義回調(diào)函數(shù)示例代碼
- 原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
相關(guān)文章
深入探究JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關(guān)優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個瀏覽器js解釋器下的表現(xiàn),需要的朋友可以參考下2016-03-03

Cropper.js進(jìn)階之實現(xiàn)圓形頭像裁剪功能示例

原生js實現(xiàn)查找/添加/刪除/指定元素的class

JavaScript數(shù)組排序功能簡單實現(xiàn)