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

 更新时间:2013年11月15日 16:18:04   作者:  
这篇文章主要介绍了javascript中动态加载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文件

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

复制代码 代码如下:

<script language="javascript">

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

</script>

给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的方法。

相关文章

  • 深入探究JavaScript中for循环的效率问题及相关优化

    深入探究JavaScript中for循环的效率问题及相关优化

    这篇文章主要介绍了JavaScript中for循环的效率问题及相关优化,文中谈到了Underscore.js库及循环在各个浏览器js解释器下的表现,需要的朋友可以参考下
    2016-03-03
  • javascript实现淡蓝色的鼠标拖动选择框实例

    javascript实现淡蓝色的鼠标拖动选择框实例

    这篇文章主要介绍了javascript实现淡蓝色的鼠标拖动选择框,可实现鼠标拖动出现淡蓝色选择框的效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下
    2015-05-05
  • 小程序展示弹窗常见API实例详解

    小程序展示弹窗常见API实例详解

    弹窗对我们大家来说应该都不陌生,这篇文章主要给大家介绍了关于小程序展示弹窗常见API的相关资料,主要包括showToast, showModal,showLoading和showActionSheet,需要的朋友可以参考下
    2022-09-09
  • Cropper.js进阶之实现圆形头像裁剪功能示例

    Cropper.js进阶之实现圆形头像裁剪功能示例

    这篇文章主要为大家介绍了Cropper.js进阶之实现圆形头像裁剪功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 原生js实现查找/添加/删除/指定元素的class

    原生js实现查找/添加/删除/指定元素的class

    查找、添加、删除、指定元素的class使用原生js实现不可思议吧,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-04-04
  • 详解js常用分割取字符串的方法

    详解js常用分割取字符串的方法

    这篇文章主要介绍了js常用分割取字符串的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 分享JS表单验证源码(带错误提示及密码等级)

    分享JS表单验证源码(带错误提示及密码等级)

    这篇文章主要介绍了JS表单验证源码(带错误提示及密码等级),代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 微信小程序中的列表切换功能实例代码详解

    微信小程序中的列表切换功能实例代码详解

    这篇文章主要介绍了微信小程序中的列表切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • js、jquery实现列表模糊搜索功能过程解析

    js、jquery实现列表模糊搜索功能过程解析

    这篇文章主要介绍了js、jquery实现列表模糊搜索功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • JavaScript数组排序功能简单实现

    JavaScript数组排序功能简单实现

    这篇文章主要介绍了JavaScript数组排序功能简单实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05

最新评论