js动态引入的四种方式

index.html

[html] view plaincopy
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.    <meta content="text/html;charset=utf-8" http-equiv="content-type">  
  5.    <title> </title>  
  6.     <script src='' id="s1"></script>  
  7.    <script src="dynamic.js"></script>  
  8.  </head>  
  9.   
  10.  <body>  
  11.     
  12.  </body>  
  13. </html>  

test.js

[html] view plaincopy
 
  1. alert("hello! I am test.js");  
  2. var str="1";  




dynamic.js

[javascript] view plaincopy
 
  1. //第一种方式：直接document.write 但这样会把当前的页面全覆写掉  
  2. //document.write("<script src='test.js'></script>");  
  3.   
  4.   
  5. //第二种方式:动态改变已有script的src属性  
  6. //s1.src="test.js"  
  7.   
  8.   
  9. //第三种方式：动态创建script元素  
  10. /*    var oHead = document.getElementsByTagName('HEAD').item(0); 
  11.     var oScript= document.createElement("script"); 
  12.     oScript.type = "text/javascript"; 
  13.     oScript.src="test.js"; 
  14.     oHead.appendChild(oScript); 
  15. */  
  16. //其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~  
  17.   
  18. //alert(str);  
  19.   
  20.   
  21. /*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走， 
  22. 如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing.... 
  23.  
  24. <strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong> 
  25. */  
  26.   
  27. function GetHttpRequest()  
  28. {  
  29.     if ( window.XMLHttpRequest ) // Gecko  
  30.         return new XMLHttpRequest() ;  
  31.     else if ( window.ActiveXObject ) // IE  
  32.         return new ActiveXObject("MsXml2.XmlHttp") ;  
  33. }  
  34.   
  35.   
  36. function ajaxPage(sId, url){  
  37.     var oXmlHttp = GetHttpRequest() ;  
  38.     oXmlHttp.onreadystatechange = function()    
  39.      {  
  40.         if (oXmlHttp.readyState == 4)  
  41.         {  
  42.            includeJS( sId, url, oXmlHttp.responseText );  
  43.         }  
  44.     }  
  45.     oXmlHttp.open('GET', url, false);//同步操作  
  46.     oXmlHttp.send(null);  
  47. }  
  48.   
  49.   
  50. function includeJS(sId, fileUrl, source)  
  51. {  
  52.     if ( ( source != null ) && ( !document.getElementById( sId ) ) ){  
  53.         var oHead = document.getElementsByTagName('HEAD').item(0);  
  54.         var oScript = document.createElement( "script" );  
  55.         oScript.type = "text/javascript";  
  56.         oScript.id = sId;  
  57.         oScript.text = source;  
  58.         oHead.appendChild( oScript );  
  59.     }  
  60. }  
  61.   
  62. ajaxPage( "scrA", "test.js" );  
  63. alert( "主页面动态加载JS脚本。");  
  64. alert( "主页面动态加载a.js并取其中的变量：" + str );  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dingyufenglian/p/4817007.html