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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
angular.bind使用心得
Oct 26 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python字典改变value值方法总结
2019/06/21 Python
python中的itertools的使用详解
2020/01/13 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
如何提高JDBC的性能
2013/04/30 面试题
如何执行一个shell程序
2012/11/23 面试题
社区健康教育实施方案
2014/03/18 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
公司与个人合作协议书
2016/03/19 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
html粘性页脚的具体使用
2022/01/18 HTML / CSS
Vue监视数据的原理详解
2022/02/24 Vue.js
Python使用MapReduce进行简单的销售统计
2022/04/22 Python