管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

教程首页 更多教程