也谈window.onload
程序员文章站
2022-06-10 09:17:46
...
首先看如下三段代码，你觉得运行结果会是什么呢？
onload1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test1</title>
<script type="text/javascript">
function init() {
try {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
} catch (e) {
alert("Error");
}
}
window.onload = init();
</script>
</head>
<body>
Hello world 1111
</body>
</html>
onload2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test2</title>
<script type="text/javascript">
function init() {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
}
window.onload = function() {
init();
};
</script>
</head>
<body>
Hello world 1111
<br>
</body>
</html>
onload3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test3</title>
<script type="text/javascript">
function init() {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
}
</script>
</head>
<body onload="init()">
Hello world 1111
<br>
</body>
</html>
你是否认为三段代码执行的结果是相同的呢？即页面显示的是：
Hello world 1111
Hello world 2222
实际的结果是：
对于onload1.jsp，会先 跳出"Error"提示框，然后 页面显示Hello world 1111；
而对于onload2.jsp和onload3.jsp则会出现如下的运行结果：
Hello world 1111
Hello world 2222
这是什么原因呢？
对于onload2.jsp和onload3.jsp，这是onload的常见用法（两种实际效果是一样的），此时，onload脚本会在页面加载完成后执行，否则，结果就应该是：
Hello world 2222
Hello world 1111
而对于onload1.jsp，区别于后两种的地方在于，”window.onload = init();”这行代码中的init后面跟着一对括号，导致onload脚本在页面（也许说文档更准确）未加载完成前就开始执行，而且先于body元素执行，这样当执行init函数时，异常就不可避免地发生了，因为此时就没有body元素。
补充：