js动态引入的四种方法
本文表述了关于js动态引入四种方式的实例代码。分享给大家供大家参考,具体如下:
index.html
test.js
alert("hello!Iamtest.js"); varstr="1";
dynamic.js
//第一种方式:直接document.write但这样会把当前的页面全覆写掉 //document.write("<\/script>"); //第二种方式:动态改变已有script的src属性 //s1.src="test.js" //第三种方式:动态创建script元素 /*varoHead=document.getElementsByTagName('HEAD').item(0); varoScript=document.createElement("script"); oScript.type="text/javascript"; oScript.src="test.js"; oHead.appendChild(oScript); */ //其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~ //alert(str); /*以上三种方式都采用异步加载机制,也就是加载过程中,页面会往下走, 如果这样的话会有问题的,如上面的str就访问不到,因为当程序执行alert(str)时,test.js还在加载Ing.... 那么第四种就是基于ajax请求的,且是推荐 */ functionGetHttpRequest() { if(window.XMLHttpRequest)//Gecko returnnewXMLHttpRequest(); elseif(window.ActiveXObject)//IE returnnewActiveXObject("MsXml2.XmlHttp"); } functionajaxPage(sId,url){ varoXmlHttp=GetHttpRequest(); oXmlHttp.onreadystatechange=function() { if(oXmlHttp.readyState==4) { includeJS(sId,url,oXmlHttp.responseText); } } oXmlHttp.open('GET',url,false);//同步操作 oXmlHttp.send(null); } functionincludeJS(sId,fileUrl,source) { if((source!=null)&&(!document.getElementById(sId))){ varoHead=document.getElementsByTagName('HEAD').item(0); varoScript=document.createElement("script"); oScript.type="text/javascript"; oScript.id=sId; oScript.text=source; oHead.appendChild(oScript); } } ajaxPage("scrA","test.js"); alert("主页面动态加载JS脚本。"); alert("主页面动态加载a.js并取其中的变量:"+str);
上文所表述的全部内容是js动态引入,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。