window.onload() 居然比 body.onload()执行时间还早

本帖最后由 yingrihong 于 2010-06-08 14:27:14 编辑

解决方案 »

  1.   

    <SCRIPT LANGUAGE="JavaScript">
    window.onload = haha()
    function haha() {
    alert('window onload');
    alert(document.getElementById('testdiv'));
    }
    </SCRIPT>  
    放到代码最后，得到的就不是null了，但是执行顺序上，window.onload优先
      

  2.   

    JS中调用了window.onload = function()属性，同时在页面上又有body onload语句。导致window.onload事件覆盖掉body onload事件。http://www.webjx.com/javascript/jsajax-14152.html
      

  3.   

    window.attachEvent('onload',haha)
    window.onload就比body的onload执行的晚
      

  4.   

     那等于说是window.onload事件不是在页面全部加载完了再执行的了？
     这跟资料上说的都不一样啊
      

  5.   


    <HTML>  
    <HEAD>  
    <TITLE> New Document </TITLE>  
    <SCRIPT LANGUAGE="JavaScript">
    /*
    window.onload = haha();
    function haha() {
    alert('window onload');
    alert(document.getElementById('testdiv'));
    }
    */
    onload = function()  // this is body.onload?
    {
      alert('window onload');
    alert(document.getElementById('testdiv').id);
    }
    </SCRIPT>  
    </HEAD>  
     
    <BODY onload="alert('body onload');alert(document.getElementById('testdiv').innerText)" onclick="alert('click');">  
    <div id="testdiv">
    aaa
    </div>
    </BODY>  
    </HTML>  我把代码改成onload函数，结果才发现，平时经常用的onload函数是body.onload，而不是window.onload。
    执行结果分析：
    1，body.onload事件在页面加载结束后执行。而且js里面的onload函数被body元素onload属性覆盖了。如果把script放到body后面则反之。总之根据页面加载顺序来进行同一个属性的覆盖
    2，window.onload确实如楼主所言。实际我理解是：当页面加载到window.onload，window.onload就会执行。比如把window.onload放到页面最后执行，testdiv就不是null了
      

  6.   


    另外body中的onload事件执行时间也不是body内的对象全部都加载完了才执行，如果body内对象特别多，
    比如表格内容超过了1万行，就不会等加载完了才执行，而是会提前执行
      

  7.   

    html执行代码是按顺序执行的！~
    当你执行window.onload = haha()时，
    你的下面的<body>还没执行所以为null，
    当你执行到body onload的时候，他就调函数啦
      

  8.   

    当js中有window.onload，而<BODY>中又有onload属性时，
    window.onload在<HEAD>中
    情况一，window.onload指定的function是匿名的，则只执行后者，且动作是后者的动作。如：
    <html>
    <head>
    <script type="text/javascript">
    alert('a');
    window.onload=function(){ // 
    alert('b');
    }
    alert('c');
    </script>
    </head>
    <body onload="alert('d');">
    </body>
    </html> ----显示：acd
    情况二，window.onload指定的function不是匿名的，则都会执行，前者先于后者。如：
    <html>
    <head>
    <script type="text/javascript">
    alert('a');
    window.onload=fn(); // 后续脚本不执行
    function fn(){
    alert('b');
    }
    alert('c');
    </script>
    </head>
    <body onload="alert('d');">
    </body>
    </html> ----依次显示：abd
    window.onload在<BODY>中
    情况三，window.onload指定的function是匿名的，则只执行后者，但动作前者是前者的动作。如：
    <html>
    <head>
    </head>
    <body onload="alert('a');">
    <script type="text/javascript">
    alert('b');
    window.onload=function (){ //
    alert('c');
    }
    alert('d');
    </script>
    </body>
    </html> ----依次显示：bdc
    情况四，window.onload指定的function不是匿名的，则都会执行，前者优于后者。如：
    <html>
    <head>
    </head>
    <body onload="alert('a');">
    <script type="text/javascript">
    alert('b');
    window.onload=fn(); // 后续脚本未执行
    alert('c');
    function fn(){
    alert('d');
    }
    </script>
    </body>
    </html> ----依次显示：bda
      

  9.   

    1<TITLE> New Document </TITLE>  
    <SCRIPT LANGUAGE="JavaScript">
    window.onload = function(){
     alert("dddd");
     alert('window onload');
     alert(document.getElementById('testdiv'));//output object
    }
    </SCRIPT>  
    </HEAD>  
     
    <BODY >  
    <div id="testdiv">
    aaa
    </div>
    </BODY>  
    </HTML> 
    2、下面这段代码body中的onload会覆盖window.onload
    <HEAD>  
    <TITLE> New Document </TITLE>  
    <SCRIPT LANGUAGE="JavaScript">
    window.onload = function(){
     alert("dddd");
     alert('window onload');
     alert(document.getElementById('testdiv'));//output object
    }
    </SCRIPT>  
    </HEAD>  
     
    <BODY onload="alert('body onload');alert(document.getElementById('testdiv').innerText)" onclick="alert('click');">  
    <div id="testdiv">
    aaa
    </div>
    </BODY>  
    </HTML> 
      

  10.   

    而下面这段会output null，我觉得onload这个事件函数是一个引用，实际执行的是haha函数，所以会页面往下解析时会执行haha()函数，而此时页面还没加载完，所以是null<SCRIPT LANGUAGE="JavaScript">
    window.onload = haha()
    function haha() {
    alert('window onload');
    alert(document.getElementById('testdiv'));
    }
    </SCRIPT
      

  11.   

    这段码子，是直接先执行了haha()然后再加载的html吧。
    你改成
    window.onload = function() 
    {
    alert('window onload');
    alert(document.getElementById('testdiv'));
    }看看。
      

  12.   

    <script>
      function TestFunction()
      {
        alert(window.onload);
      }
    </script><input type='button' value='test' onclick='TestFunction();' />
      

  13.   

    就发现一个问题不应该是window.onload = haha()应该是window.onload = haha
      

  14.   

    window.onload 与body.onload的执行顺序搞懂了，但是还有一个问题body中的onload事件执行时机是什么时候？是body内的对象全部都加载完了才执行吗？我测试的一个jsp页面的body内的div对象中的表格内容特别多，
    超过了1万行，浏览器在这个div还没加载完了的时候就执行了onload函数，这是为什么？
      

  15.   

     lz理解错了一个意思，不是window.onload()在页面加载完了才执行，是在<head></head>标签对中的javascript代码会在页面加载完了之后执行。这样就加快了页面的反应速度。所以很少有人把复杂的javascript代码写在<body>中。
    window.onload 其实是对body中的onload标记添加函数，当页面全部加载完了后开始执行效果时，运行到body中的onload属性就会执行javascript中对应的函数了。
      

  16.   

    window.onload = haha()  haha()是函数调用呢，不是注册事件，返回值'undefine'. 
    window.onload=function() {} 你需要将函数名赋值给他 window.onload=haha;这样就对了.结果是:body onload->aaa
    另外body中会覆盖掉window.onload，你把body事件去了，结果就是window onload->aaa
      

  17.   

    先说一点，使用window.onload请使用window.onload=XXXX;
    而不是window.onload=XXX();这个的效果只能是先执行XXX()函数，然后把这个函数的返回值赋值给左边的window.onload，这样的结果是window.onload不会被成功注册。
    【知识点：函数名传递，赋值的基本知识】25楼的兄弟基本给出正确的答案，
    要么window.onload=function(){XXXXX}要么window.onload=XXXX;
    因为window.onload = haha()，实际的运行效果是：先运行了haha()函数，再把这个函数的返回值传递给了window.onload，又由于haha函数没有返回值，所以这段代码的实际效果等同于，先
    执行haha(){alert('window onload');}，再执行window.onload=undefined;这样一来window.onload实际上没有被成功注册。所以，要想成功注册就只能是window.onload=function(){ haha(); }或者window.onload=haha;
    其实后者也等同于window.onload=function haha(){………………};比较起来，前者是匿名的，后者不是匿名的。总结，当window.onload是被成功注册时，它和<body onload="">就是同一个了，谁在最后面就以谁为准。
    记住前提是正确的、成功的注册了。
    如果注册失败，就接着找以后能成功注册的，并绑定它。这里的代码大家自己试试，就是简单修改了楼主的。
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    var num = 1;
    window.onload = haha();
    window.onload = haha;//这个代码在body前还是body后，效果不一样
    function haha(){
    alert('window onload');
    alert("num="+num);
    num++;
    }
    function hehe(){
    alert('body onload');
    alert("num="+num);
    num++;
    }
    </SCRIPT>  
    </HEAD>  
     
    <BODY onload="hehe()" onclick="alert('click');">  
    <div id="testdiv">
    aaa
    </div>
    </BODY> 
    <SCRIPT LANGUAGE="JavaScript">
    //window.onload = haha;//这个代码在body前还是body后，效果不一样
    </SCRIPT>
    </HTML>
      

  18.   


    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    var num = 1;
    window.onload = haha();
    window.onload = haha;//这个代码在body前还是body后，效果不一样
    function haha(){
    alert('window onload');
    alert("num="+num);
    num++;
    }
    function hehe(){
    alert('body onload');
    alert("num="+num);
    num++;
    }
    </SCRIPT>  
    </HEAD>  
     
    <BODY onload="hehe()" onclick="alert('click');">  
    <div id="testdiv">
    aaa
    </div>
    </BODY> 
    <SCRIPT LANGUAGE="JavaScript">
    //window.onload = haha;//这个代码在body前还是body后，效果不一样
    </SCRIPT>
    </HTML>
      

  19.   

    懒得看不下去，建议楼主删掉此贴！不知道有没人给正确解释下；1、函数没有声明就使用，可能早期能够执行，但是不规范；
    2、事件注册是要方法名，而不是去执行该方法；3、window.document.body.onload可能是引用window.onload了； function haha(){
    alert('window onload');
    alert(document.getElementById('testdiv'));
    }
    window.onload = haha;
      

  20.   

    真心看不下去了，你这句话window.onload = haha()就已经调用函数haha了，楼上正解。