• 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 );  
  • 相关阅读:
    第一章 数据库基本操作
    Linux卸载jdk
    Jenkins Jboss的启动
    Jenkins启动脚本
    Linux SVN 创建项目
    测试工程师到底是干啥的?测试工程师转开发有多大希望?
    如何评审功能测试用例?
    Maven上传
    持续集成
    jquery获取所有checked的value
  • 原文地址:https://www.cnblogs.com/dingyufenglian/p/4817007.html
Copyright © 2020-2023  润新知