javascript中動態載入js檔案多種解決方法總結_javascript技巧

一個比較全部在動態加法

複製程式碼 程式碼如下:

程式碼如下:


/
    動態載入js v1.0 by：dum
    用法：src="webJsBase.js?load=a,b"
    附註：載入本目錄下js
*/varwebweb = {
    require: function(libraryName) {
        document.write('');
    load: function(defaultLoad) {
        if((typeof Prototype=='undefined')||(typeof Element == 'undefined')(typeof Elementdefined')||(typeof Element == 'undefined')(typeof Element.Methods==)'definetypeof >        throw ('prototype lib 載入失敗！');
        if(typeof defaultLoad=='undef 🎜>        $$('head script[src]').findAll(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.load(); //這裡參數可以指定預設要載入的js檔案



這是最簡單的方法在載入完後再利用直接document.write 如下圖。

複製代碼

代碼如下:

    document.write("");

給script加個id再去動態改變已有script的src 屬性

複製程式碼

程式碼如下:

這裡利用getElementsByTagName('HEAD')動態建立 script元素

複製程式碼

程式碼如下: <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);

還可以這樣嘗試一下，自定一個函數

複製程式碼

程式碼如下: 程式碼如下:

function include(src) {

HTMLCode = '';
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");
include(baseDir "/model/Tile.js");

還有朋友說可以使用ExtJs4 動態載入js這裡我就不介紹了，上面的方法足夠讓你實作動態載入js了.

所以在採用這類方法動態載入Js 的同時，主介面的Js腳本是繼續執行的，所以可能出現透過非同步載入的Js程式碼得不到預期的效果的情況。

這時候可以考慮採用Ajax載入Js的方法。