建立dynamic.js文件,表示动态加载的js文件,里面的内容为:
function dynamicJS() {
alert("加载完毕");
}
如下方法中的html页面和dynamic.js文件在一个目录下。
一. document.write()
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DynamicloadJS</title><script>functioninit(){document.write('<scriptsrc="dynamic.js"><//script>');document.write('<inputtype="button"onclick="load();"value="加载完毕"//>');}dynamicJS();//此处报错,由于dynamic.js文件还未加载完毕functionload(){dynamicJS();}</script></head><body><inputtype="button"onclick="init();"value="初始化加载"/><!--<inputtype="button"onclick="load();"value="加载完毕">--></body></html>View Code问题,1,document.write会重写页面,在点击初始化加载按钮后,页面重绘导致原有的内容丢失,上述代码中注释掉的”加载完毕“按钮会丢失,因此需要在init函数中使用document.write的方式建立一个按钮。
问题2,异步加载,直接调用dynamicJS方法会报错,因为js文件未加载完毕,而在其后的代码已经开始运行。
综上,此种方法不推荐。二. 动态改变已有script的src属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DynamicloadJS</title><scriptid="abc"src=""></script><script>functioninit(){abc.src="dynamic.js";dynamicJS();//此处调用报错,由于还未加载完毕}functionload(){dynamicJS();}</script></head><body><inputtype="button"onclick="init();"value="初始化加载"/><inputtype="button"onclick="load();"value="加载完毕"></body></html>View Code这个代码运行起来有问题,点击”加载完毕“按钮还是报"Uncaught ReferenceError: dynamicJS is not defined"
问题:异步加载问题
三. 动态创建script元素
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DynamicloadJS</title><script>functioninit(){varmyScript=document.createElement('script');myScript.src='dynamic.js';document.body.appendChild(myScript);dynamicJS();//此处调用报错,由于还未加载完毕}functionload(){dynamicJS();}</script></head><body><inputtype="button"onclick="init();"value="初始化加载"/><inputtype="button"onclick="load();"value="加载完毕"></body></html>View Code问题:相对于第二种方式,不需要在页面上一开始就添加script元素,但同样存在异步加载问题。
前三种方法共同点:异步执行,加载这些脚本的同时,主页面的脚本继续运行。若此时调用未加载完成的JS中的代码,会报错。
四. xmlHttPRequest/ActiveXObject 同步加载
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>DynamicloadJS</title><script>functioninit(){AjaxPage('abc','dynamic.js');dynamicJS();}functionajaxPage(sId,url){varxhr=window.xmlhttpRequest?newXMLHttpRequest():newActiveXObject();xhr.open('GET',url,false);//同步加载xhr.send(null);//xhr.onreadystatechange=function(){if(xhr.readyState==4){//0代表访问本地资源,200代表访问服务器成功,304代表没做修改,访问缓存if(xhr.status==200||xhr.status==0||xhr.status==304){includeJS(sId,xhr.responseText);}}//}}functionincludeJS(sId,source){if(source!=null&&(!document.getElementById(sId))){varmyHead=document.getElementsByTagName('head')[0];varmyScript=document.createElement('script');myScript.id=sId;try{myScript.appendChild(document.createTextNode(source));}catch(ex){myScript.text=source;}myHead.appendChild(myScript);}}</script></head><body><inputtype="button"onclick="init();"value="测试按钮"/></body></html>View Code参考链接:http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html
新闻热点
疑难解答