js动态引入的四种方法
网络 2018-05-24 1862
本文表述了关于js动态引入四种方式的实例代码。分享给大家供大家参考，具体如下：
index.html
1 2 3 4 5 6 7 8 9 10 | <html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title> </title> <script src='' id="s1"></script> <script src="dynamic.js"></script> </head> <body> </body> </html> |
test.js
1 2 | alert("hello! I am test.js"); var str="1"; |
dynamic.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | //第一种方式：直接document.write 但这样会把当前的页面全覆写掉 //document.write("<script src='test.js'><\/script>"); //第二种方式:动态改变已有script的src属性 //s1.src="test.js" //第三种方式：动态创建script元素 /* var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= 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请求的,且是推荐 */ function GetHttpRequest() { if ( window.XMLHttpRequest ) // Gecko return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; } function ajaxPage(sId, url){ var oXmlHttp = GetHttpRequest() ; oXmlHttp.onreadystatechange = function() { if (oXmlHttp.readyState == 4) { includeJS( sId, url, oXmlHttp.responseText ); } } oXmlHttp.open('GET', url, false);//同步操作 oXmlHttp.send(null); } function includeJS(sId, fileUrl, source) { if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript = 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动态引入，希望本文的内容对大家的学习或者工作具有一定的参考学习价值
