javascript中动态加载js文件多种解决办法总结_javascript技巧
程序员文章站
2022-05-21 18:10:30
...
一个比较全部在动态加方法
/*
动态加载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文件
");
function include(src) {
HTMLCode = '';
document.write(HTMLCode);
}
调用方法,这样看上去就你php的include函数了
include(baseDir + "/Prototype.js");
include(baseDir + "/Map.js");
include(baseDir + "/MapEvent.js");
复制代码 代码如下:
/*
动态加载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 属性
复制代码 代码如下:
s1.src="test.js"
这里利用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的方法。
推荐阅读
-
javascript开发随笔二 动态加载js和文件_javascript技巧
-
动态加载js、css等文件跨iframe实现_javascript技巧
-
动态创建script在IE中缓存js文件时导致编码的解决方法_javascript技巧
-
动态加载js文件 document.createElement_javascript技巧
-
动态加载js文件 document.createElement_javascript技巧
-
javascript开发随笔二 动态加载js和文件_javascript技巧
-
javascript中动态加载js文件多种解决办法总结_javascript技巧
-
javascript - 部署到线上的项目,写在js文件中需要动态加载的图片路径怎么去查找?
-
javascript中动态加载js文件多种解决办法总结_javascript技巧
-
js加载之使用DOM方法动态加载Javascript文件_javascript技巧