javascript中動態(tài)加載js文件多種解決辦法總結
一個比較全部在動態(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(); //這里參數可以指定默認要加載的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>
還可以這樣嘗試一下，自定一個函數
function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}
調用方法，這樣看上去就你php的include函數了
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這里我就不介紹了，上面的方法足夠讓你實現動態(tài)加載js了.
所以在采用這類方法動態(tài)加載Js 的同時，主界面的Js腳本是繼續(xù)執(zhí)行的，所以可能出現通過異步加載的Js代碼得不到預期的效果的情況。
這時候可以考慮采用Ajax加載Js的方法。
相關文章
深入探究JavaScript中for循環(huán)的效率問題及相關優(yōu)化
這篇文章主要介紹了JavaScript中for循環(huán)的效率問題及相關優(yōu)化,文中談到了Underscore.js庫及循環(huán)在各個瀏覽器js解釋器下的表現,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了javascript實現淡藍色的鼠標拖動選擇框,可實現鼠標拖動出現淡藍色選擇框的效果,涉及javascript鼠標事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05
彈窗對我們大家來說應該都不陌生,這篇文章主要給大家介紹了關于小程序展示彈窗常見API的相關資料,主要包括showToast,?showModal,showLoading和showActionSheet,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Cropper.js進階之實現圓形頭像裁剪功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
查找、添加、刪除、指定元素的class使用原生js實現不可思議吧，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
這篇文章主要介紹了js常用分割取字符串的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了JS表單驗證源碼（帶錯誤提示及密碼等級）,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了微信小程序中的列表切換功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了js、jquery實現列表模糊搜索功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JavaScript數組排序功能簡單實現,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05