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

企鹅博客
企鹅博客
企鹅博客
28892
文章
0
评论
2020年9月14日21:44:48 评论 2 views 1502字阅读5分0秒

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

复制代码 代码如下:

/*

动态加载js v1.0 by:dum

用法:src="webJsBase.js?load=a,b"

注:加载本目录下js

*/

var webJsBase = {

require: function(libraryName) {

document.write('
');

},

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 属性

复制代码 代码如下:

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

复制代码 代码如下:


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

复制代码 代码如下:

function include(src) {

HTMLCode = '
';

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

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
Javascript vue.js表格分页,ajax异步加载数据 js教程

Javascript vue.js表格分页,ajax异步加载数据

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。 效果: 代码: 1.注册一个组件 js Vue.component('p...
分享一个React的实践项目 js教程

分享一个React的实践项目

上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 sta...
history的几种方法 js教程

history的几种方法

history 对象保存着用户上网的浏览记录,从窗口被打开的时刻算起 history.go(num); num 可以取值正负整数,负数表示向后跳转 ( 后退 ) ,正数表示向前跳转 ( 前进 ) ,n...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: