index.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <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
- alert("hello! I am test.js");
- var str="1";
dynamic.js
- //第一种方式：直接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....
- <strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong>
- */
- 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 );