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

yingrihong 2010-06-08 02:26:19
如题，看到好多资料都介绍说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”

各位大侠有没有碰到过这种情况的？
...全文
28197 30 打赏 收藏 转发到动态 举报
写回复
用AI写文章
30 条回复
切换为时间正序
请发表友善的回复…
发表回复
yayu_myself 2012-10-08
  • 打赏
  • 举报
 回复
真心看不下去了，你这句话

window.onload = haha()

就已经调用函数haha了，

楼上正解。
千山飞鸟绝 2012-06-27
  • 打赏
  • 举报
 回复
懒得看不下去，建议楼主删掉此贴！

不知道有没人给正确解释下；

1、函数没有声明就使用，可能早期能够执行，但是不规范；
2、事件注册是要方法名，而不是去执行该方法；

3、window.document.body.onload可能是引用window.onload了；

function haha(){
alert('window onload');
alert(document.getElementById('testdiv'));
}
window.onload = haha;
lizhijun20 2011-01-22
  • 打赏
  • 举报
 回复 


<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>
lizhijun20 2011-01-22
  • 打赏
  • 举报
 回复
先说一点，使用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>
ShanBoYingTai 2010-12-10
  • 打赏
  • 举报
 回复
这帖子怎么这么早的
ShanBoYingTai 2010-12-10
  • 打赏
  • 举报
 回复
window.onload = haha() haha()是函数调用呢，不是注册事件，返回值'undefine'.
window.onload=function() {} 你需要将函数名赋值给他 window.onload=haha;这样就对了.结果是:body onload->aaa
另外body中会覆盖掉window.onload，你把body事件去了，结果就是window onload->aaa
86y 2010-12-10
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 xk1126 的回复:]
html执行代码是按顺序执行的！~
当你执行window.onload = haha()时，
你的下面的<body>还没执行所以为null，
当你执行到body onload的时候，他就调函数啦
[/Quote]
+1
simaa0106 2010-06-28
  • 打赏
  • 举报
 回复
lz理解错了一个意思，不是window.onload()在页面加载完了才执行，是在<head></head>标签对中的javascript代码会在页面加载完了之后执行。这样就加快了页面的反应速度。所以很少有人把复杂的javascript代码写在<body>中。
window.onload 其实是对body中的onload标记添加函数，当页面全部加载完了后开始执行效果时，运行到body中的onload属性就会执行javascript中对应的函数了。
yingrihong 2010-06-28
  • 打赏
  • 举报
 回复
window.onload 与body.onload的执行顺序搞懂了，但是还有一个问题

body中的onload事件执行时机是什么时候？

是body内的对象全部都加载完了才执行吗？

我测试的一个jsp页面的body内的div对象中的表格内容特别多，
超过了1万行，浏览器在这个div还没加载完了的时候就执行了onload函数，这是为什么？
hibin101 2010-06-21
  • 打赏
  • 举报
 回复
引用当然不用括号啦，加括号就是函数返回的值了
hzrui 2010-06-20
  • 打赏
  • 举报
 回复
就发现一个问题

不应该是window.onload = haha()

应该是window.onload = haha
helloword222 2010-06-20
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 hzrui 的回复:]
就发现一个问题

不应该是window.onload = haha()

应该是window.onload = haha
[/Quote]

重大发现！！

不需要括号吗？？
yingzhilian2008 2010-06-19
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 jol_boy 的回复:]
<SCRIPT LANGUAGE="JavaScript">
window.onload = haha()
function haha() {
alert('window onload');
alert(document.getElementById('testdiv'));
}
</SCRIPT>
放到代码最后，得到的就不是null了，但是执行顺序上，window.onload……
[/Quote]这么搞就可以！
zhyzdl 2010-06-19
  • 打赏
  • 举报
 回复
学习下先啊。谢谢。
Sillen 2010-06-19
  • 打赏
  • 举报
 回复
<script>
function TestFunction()
{
alert(window.onload);
}
</script>

<input type='button' value='test' onclick='TestFunction();' />
Sillen 2010-06-19
  • 打赏
  • 举报
 回复
这段码子，是直接先执行了haha()然后再加载的html吧。
你改成
window.onload = function()
{
alert('window onload');
alert(document.getElementById('testdiv'));
}看看。
hibin101 2010-06-18
  • 打赏
  • 举报
 回复
而下面这段会output null，我觉得onload这个事件函数是一个引用，实际执行的是haha函数，所以会页面往下解析时会执行haha()函数，而此时页面还没加载完，所以是null
<SCRIPT LANGUAGE="JavaScript">

window.onload = haha()

function haha() {

alert('window onload');

alert(document.getElementById('testdiv'));

}

</SCRIPT
hibin101 2010-06-18
  • 打赏
  • 举报
 回复
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>
走走—逛逛 2010-06-18
  • 打赏
  • 举报
 回复
当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
xk1126 2010-06-08
  • 打赏
  • 举报
 回复
html执行代码是按顺序执行的！~
当你执行window.onload = haha()时，
你的下面的<body>还没执行所以为null，
当你执行到body onload的时候，他就调函数啦
加载更多回复（8）
window.onload与body.onload
1.如果window.onload是在body里定义的，也就是在body onload下面定义的，则只执行window.onload，不会执行body onload。即遵循“”从上到下依次加载，后者覆盖前者“的原则”。 2.如果window.onload是在head里定义...
JavaScript的window.onload事件的理解
window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。 只有一个要执行的函数语法： window.onload = funcRef; 在页面加载完成后 funcRef 方法会被调用。 有多个要执行的函数...
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
html 中页面的加载顺序以及window.onload 与body ...情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */ function loadBody(){ console.log("load
window.onload和body.onload该放什么位置
window.onload和body.onload时加载主函数，window.onload=mainfx可以放在前或后 body.onload=mainfx应该放在后 ，如果 放前面，body还未被浏览器渲染  ex1: /*obj.onload=mainfx; var obj=document.body;//...
window.onload的用法
window.onload: 页面加载完成 一，window.onload的用法： 因为页面中的代码一般情况下按照，从上到下，从左到右的顺序执行。 所以当js代码需要获取页面中的元素时，如果script标签在元素的前面，需要加window....
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章