zoukankan      html  css  js  c++  java
  • js在html中的加载执行顺序

    js在html中的加载执行顺序

    1.加载顺序:引入标记<script />的出现顺序,

    页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序,
    <script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题 3</title>
    <script>
    alert(
    "1-最先执行");
    </script>
    </head>
    <body onload="alert('3-最后执行');">
    <script>
    alert(
    "2-接着执行");
    </script>
    </body>
    </html>

    2、每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。


    变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

    <script type="text/javscrpt">//<![CDATA[
    alert(tmp);
    //输出 undefined var
    tmp = 1;
    alert(tmp); //输出 1//]]>
    </script>

    3.同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。

    <script type="text/javscrpt">//<![CDATA[
    aa(); //浏览器报错//]]>
    </script>
    <script type="text/javscrpt">//<![CDATA[
    aa(); //输出 1
    function aa()
    {
    alert(1);
    }//]]>
    </script>


    4.document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,
    然后在继续解析HTML文档。

    <script type="text/javascript">//<![CDATA[    
    document.write('<script type="text/javascript" src="test.js"><//script>');
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('<//script>'); //]]>
    </script>

    <script type="text/javascript">//<![CDATA[
    alert(3); //]]>
    </script>
     
    test.js的内容是: 
    var tmpStr = 1;   
    alert(tmpStr);




    在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3
    在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义
    原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,
    并且执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。
    解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理,把代码拆分来实现:
    <script type="text/javascript">//<![CDATA[
        document.write('<script type="text/javascript" src="test.js"><//script>');
            //]]>
    </script>
    <script type="text/javascript">//<![CDATA[   
        document.write('<script type="text/javascript">');   
        document.write('alert(2);')
        document.write('alert("我是" + tmpStr);');   
        document.write('<//script>');   
        //]]>
    </script> 
     
     <script type="text/javascript">//<![CDATA[   
        alert(3);   
        //]]>
    </script>
    这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3

    总结:IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容

    5、同名JS函数执行顺序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html>
    <head>
    <script type="text/javascript">

    function aa() {
    alert(
    'First aa')
    }
    </script>
    <title></title>
    </head>
    <body>
    <form id="form1" runat="server">

    <br />
    <input id="Button1" type="button" value="button" onclick="aa();"/>
    </form>
    </body>
    <script type="text/javascript">
    function aa(s) {
    alert(
    'Second aa');
    }
    function aa(s) {
    alert(
    'Last aa');
    }
    </script>
    </html>

      

      点击“botton”执行结果: Last aa

     

       在js里出现同名函数后,你在web页面里调用改js函数后,总是调用页面中最后一个加载的函数。

      

     

  • 相关阅读:
    leetcode 29-> Divide Two Integers without using multiplication, division and mod operator
    ros topic 发布一次可能会接收不到数据
    python中的print()、str()和repr()的区别
    python 部分函数
    uiautomatorviewer错误 unable toconnect to adb
    pyqt 不规则形状窗口显示
    appium 计算器demo
    Spring 3.0 注解注入详解
    Spring Autowire自动装配
    restful 学习地址
  • 原文地址:https://www.cnblogs.com/lindaWei/p/2433454.html
Copyright © 2011-2022 走看看