软件开发培训班 >> 编程开发 >> JavaScript


javascript中动态加载js文件多种解决办法总结

　　本文标签：javascript,动态加载

一个比较全部在动态加方法

复制代码 代码如下:

/*
    动态加载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加个id再去动态改变已有script的src 属性

复制代码 代码如下:

<script src= id="s1"></script>

<script language="javascript">

    s1.src="test.js"

</script>

这里利用getElementsByTagName(HEAD)动态创建 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 动态加载js这里我就不介绍了，上面的方法足够让你实现动态加载js了.

所以在采用这类方法动态加载Js 的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况 。

这时候可以考虑采用Ajax加载Js的方法 。