日期:2014-05-16  浏览次数:20383 次

window.onload() 居然比 body.onload()执行时间还早
如题,看到好多资料都介绍说window.onload()事件是在整个页面加载完了之后才执行的。
  但是现在发现根本不是这么回事,window.onload()是在页面刚新建的时候执行的。
  我的是IE7。
  代码如下
  <HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<SCRIPT LANGUAGE="JavaScript">
window.onload = haha()
function haha() {
alert('window onload');
alert(document.getElementById('testdiv'));
}
</SCRIPT> 
</HEAD> 
 
<BODY onload="alert('body onload');alert(document.getElementById('testdiv').innerText)" onclick="alert('click');"> 
<div id="testdiv">
aaa
</div>
</BODY> 
</HTML> 

  实际的执行效果是弹出“window onload”--》“null”--》“body onload”--》“aaa”

  各位大侠有没有碰到过这种情况的?

------解决方案--------------------
lz理解错了一个意思,不是window.onload()在页面加载完了才执行,是在<head></head>标签对中的javascript代码会在页面加载完了之后执行。这样就加快了页面的反应速度。所以很少有人把复杂的javascript代码写在<body>中。
window.onload 其实是对body中的onload标记添加函数,当页面全部加载完了后开始执行效果时,运行到body中的onload属性就会执行javascript中对应的函数了。
------解决方案--------------------
window.onload = haha() haha()是函数调用呢,不是注册事件,返回值'undefine'. 
window.onload=function() {} 你需要将函数名赋值给他 window.onload=haha;这样就对了.结果是:body onload->aaa
另外body中会覆盖掉window.onload,你把body事件去了,结果就是window onload->aaa
------解决方案--------------------
先说一点,使用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="">就是同一个了,谁在最后面就以谁为准。
记住前提是正确的、成功的注册了。
如果注册失败,就接着找以后能成功注册的,并绑定它。

这里的代码大家自己试试,就是简单修改了楼主的。

JScript code

<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>