情况一:采用匿名方法
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>onload 的顺序判断</title>
</head>
<script type=”text/javascript”>
/**
* 加载页面 Body
*/
function loadBody(){
console.log(“load …… body “);
}
console.log(“load …… header javascript “);
// 匿名方法
window.onload=function (){
console.log(“load …… header window javascript “);
};
</script>
// body 加载事件
<body onload=”loadBody()”>
<div ></div>
<script type=”text/javascript”>
console.log(“load …… body javascript “);
window.onload=function(){
console.log(“load …… body window javascript “);
}
</script>
</body>
// body 外面
<script type=”text/javascript”>
console.log(“load …… body outer javascript(footer) “);
// body 下面的javascript 脚本
window.onload=function(){
console.log(“load …… body outer javascript(footer) window “);
}
</script>
</html>
结果:执行结果:
1.body 的onload方法未执行。
2.head标签 window.onload 脚本未执行。
情况二:不采用匿名方法
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>onload 的顺序判断</title>
</head>
<script type=”text/javascript”>
/**
* 加载页面 Body
*/
function loadBody(){
console.log(“load …… body “);
}
console.log(“load …… header javascript “);
function loadHeaderWindow(){
console.log(“load …… header window javascript “);
}
window.onload=loadHeaderWindow();
</script>
<body onload=”loadBody()”>
<div ></div>
<script type=”text/javascript”>
console.log(“load …… body javascript “);
function loadHeaderWindow1(){
console.log(“load …… body window javascript “);
}
window.onload=loadHeaderWindow1();
</script>
</body>
<script type=”text/javascript”>
console.log(“load …… body outer javascript(footer) “);
// body 下面的javascript 脚本
function loadHeaderWindow2(){
console.log(“load …… body outer javascript(footer) window “);
}
window.onload=loadHeaderWindow2();
</script>
</html>
结果:
1.body 的onload方法未执行。
2.head 、body 以及body 外面的window.onload都执行