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


Posted in Javascript onNovember 15, 2013

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

/*
    动态加载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 相关文章推荐
简单的JavaScript互斥锁分享
Feb 02 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
javascript基础知识
Jun 07 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
小程序实现投票进度条
Nov 20 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 #Javascript
js简单实现用户注册信息的校验代码
Nov 15 #Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 #Javascript
jquery实现手风琴效果实例代码
Nov 15 #Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 #Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 #Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 #Javascript
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
Python是如何进行类型转换的
2013/06/09 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
英语硕士生求职简历的自我评价
2013/10/15 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
打架检讨书2000字
2014/02/22 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书