您的位置:首页 > Web前端 > JavaScript

动态加载JS文件

2013-06-10 12:14 218 查看
最近做网上考试软件有个需求需要在页面上更改考试软件字典里的内容,同时更改完成之后要在页面中体现出来,也就是说不要重新载入界面(因为重新载入下,客户输入的信息就会被清空)。
说明:我们的网上考试软件是bs版本的,如果是cs版本的,就没有任何问题,想怎么改就怎么改

数据字典是生成了js文件,加载在<select>控件里的,要达到js的重新载入,解决思路如下:
1、单击按钮,弹出页面修改数据字典
2、修改完数据字典以后,重新生成数据字典的js文件。
3、关闭窗口时,调用js重新加载js文件。
4、重新清空<select>再次加载。

上面四个步骤,1,2,4,都很容易可以实现,关键是第3步。在网上找了一些资料以后,可以使用如下方法来重新加载js文件,效果还不错:
假设我们有个引用js文件为:
<script id="zxexam" type="text/javascript" language="javascript" src="9.js"></script>


 
var id="zxexam";
var oldjs = document.getElementById(id);
if(oldjs) oldjs.parentNode.removeChild(oldjs);
var scriptObj = document.createElement("script");
scriptObj.src = "http://www.zxexam.com/default.aspx";//这个是js文件的地址
scriptObj.type = "text/javascript";
scriptObj.id   = id;
document.getElementsByTagName("head")[0].appendChild(scriptObj);


以上代码可以从新加载id为"zxexam"的js。离成功不远了,激动不已。

但是,当我在后面加上重新加载的代码以后,修改的内容并不会加载出来,一定要当我在次操作的时候,他会加载出上一次的来。原来是document.getElementsByTagName("head")[0].appendChild(scriptObj);这句代码之后,并没有马上加载到文档中,所以要知道这个js文件是什么时候加载完成的。代码如下:

scriptObj.onload=scriptObj.onreadystatechange=function () {
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
reloadSelect();//重新加载js
}
}


上面代码中,ie支持onreadystatechange,其他的浏览器使用onload。
期待已久的js终于如期显示出来了。但是还有一个问题,以上代码测试了firefox,ie7,ie8,ie9,ie10,chrome,360浏览器,猎豹浏览器都没有问题,但是在ie6里面,问题依旧,每次都是加载上一次的结果。怎么弄都不成功。
在一下偶然的测试中,发现在更改src那句代码之后,加入一个alert语句即可加载出来,更改代码如下:

scriptObj.src = "http://www.zxexam.com/default.aspx";//这个是js文件的地址
alert("修改完成");//有这句话以后就可以了
scriptObj.type = "text/javascript";


这样,就可以就可以加载出来。还没有找到原因,反正功能实现了,死马当活马医吧。
最后注意:加载的地址最好每次都不一样,比如下面的:
scriptObj.src = "http://www.zxexam.com/default.aspx"+"?"+Date();//这个是js文件的地址
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息