javascript中动态加载js文件八种消除办法,javascr

作者: 前端技术  发布:2019-09-03

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

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

复制代码 代码如下:

/*
    动态加载js v1.0 by:dum 2012-03-17 www.hzhuti.com
    用法: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');
            });
        });
    }
};  

/*
    动态加载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文件

webJsBase.load(); //这里参数可以指定默认要加载的js文件

这是最简单的方法在加载完后再利用直接document.write 如下图。

这是最简单的方法在加载完后再利用直接document.write 如下图。

复制代码 代码如下:

<script language="javascript">

<script language="javascript">

    document.write("<script src='test.js'></script>");

    document.write("<script src='test.js'></script>");

</script>  

</script>

给script加个id再去动态改变已有script的src 属性

给script加个id再去动态改变已有script的src 属性

 代码如下 复制代码
<script src='' id="s1"></script>

复制代码 代码如下:

<script language="javascript">

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

    s1.src="test.js"

<script language="javascript">

</script>  

    s1.src="test.js"

这里利用getElementsByTagName('HEAD')动态创建 script元素

</script>

 
<script>

这里利用getElementsByTagName('HEAD')动态创建 script元素

    var oHead = document.getElementsByTagName('HEAD').item(0);

复制代码 代码如下:

    var oScript= document.createElement("script");

<script>

    oScript.type = "text/javascript";

    var oHead = document.getElementsByTagName('HEAD').item(0);

    oScript.src="test.js";

    var oScript= document.createElement("script");

    oHead.appendChild( oScript);

    oScript.type = "text/javascript";

</script>  

    oScript.src="test.js";

还可以这样尝试一下,自定一个函数

    oHead.appendChild( oScript);

 

</script>

function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}

还可以这样尝试一下,自定一个函数

调用方法,这样看上去就你php的include函数了

复制代码 代码如下:

 代码如下 复制代码

function include(src) {
HTMLCode = '<script language="javascript" src="' + src + '"></script>';
document.write(HTMLCode);
}

include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");

调用方法,这样看上去就你php的include函数了

include(baseDir + "/model/MapModel.js");
include(baseDir + "/model/MapType.js");
include(baseDir + "/model/Tile.js");  

复制代码 代码如下:

还有朋友说可以使用ExtJs4 动态加载js这里我就不介绍了,上面的方法足够让你实现动态加载js了.

include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");

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

include(baseDir + "/model/MapModel.js");
include(baseDir + "/model/MapType.js");
include(baseDir + "/model/Tile.js");

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

还有朋友说可以使用ExtJs4 动态加载js这里我就不介绍了,上面的方法足够让你实现动态加载js了.

 

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

摘自 php开发

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

/* 动态加载js v1.0 by:dum 2012-03-17 www.hzhuti.com 用法:src=webJsBase.js?load=a,b 注:加载本目录下js */ var webJsBase = { re...

复制代码 代码如下: /* 动态加载js v1.0 by:dum 用法:src="webJsBase.js?load=a,b" 注:加载本目录下js */ var webJsBase = {...

本文由王中王开奖结果发布于前端技术,转载请注明出处:javascript中动态加载js文件八种消除办法,javascr

关键词: