window.onload/onunload 和 body.onload/onunload 之间的区别
我已阅读问题的答案 window.onload 与 。在该问答中,许多人声称 window.onload
和 body.onload
是相同的。这不是我的经历。
考虑两个测试页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 1</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
</script>
</head>
<body onload="resetMenu();" onunload="resetMenu();">
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p><a href="http://www.google.com.au">google</a>
</p>
</body>
</html>
并且:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 2</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
window.onload = resetMenu();
window.onunload = resetMenu();
</script>
</head>
<body>
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p><a href="http://www.google.com.au">google</a>
</p>
</body>
</html>
在“测试 1”页面中,如果您从下拉菜单中选择一个项目,然后单击链接离开该页面,然后单击后退按钮,菜单将重置为原来的状态。初始状态。不过,“测试 2”页面不会发生这种情况。为什么?
虽然这是一个测试,但我的目标是使用 RegisterStartupScript 或 RegisterClientScriptBlock 在 aspx 页面上执行类似的操作,因此我希望能够在不使用主体 onload/onunload 而是使用 window.onload/onunload 的情况下重新创建“测试 1”的行为。
I have read the answers for the question window.onload vs <body onload=""/>. In that Q&A, many claim that window.onload
and body.onload
are identical. This is not what I experience.
Consider the two test pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 1</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
</script>
</head>
<body onload="resetMenu();" onunload="resetMenu();">
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p><a href="http://www.google.com.au">google</a>
</p>
</body>
</html>
And:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test 2</title>
<script type="text/javascript">
var initialSelectedIndex = 0;
function resetMenu()
{
document.getElementById("fruitMenu").selectedIndex = initialSelectedIndex;
}
window.onload = resetMenu();
window.onunload = resetMenu();
</script>
</head>
<body>
<br />
<select id="fruitMenu">
<option value ="apple">apple</option>
<option value ="banana">banana</option>
<option value ="strawberry">strawberry</option>
<option value ="grape">grape</option>
</select>
<p><a href="http://www.google.com.au">google</a>
</p>
</body>
</html>
With the "test 1" page, if you select an item from the drop down menu and the click the link to navigate away from the page and then hit the back button the menu will be reset to its initial state. This doesn't happen for the "test 2" page though. Why?
While this is a test, my goal is to do something similar on an aspx page using RegisterStartupScript or RegisterClientScriptBlock so I want to be able to recreate the behaviour of "test 1" without using the body onload/onunload but using window.onload/onunload.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
Crescent 是正确的,通过使用:
您使 window.onload 等于 resetMenu 函数的返回值,而不是提供应称为 onload (和 unload)的函数。所以你应该使用:
但是为什么你需要在页面卸载时重置菜单呢?
注意:您还可以使用匿名函数作为 onload 处理程序:)
Crescent is correct, by using:
You are making window.onload equal to the return value of the resetMenu function, rather than providing the function which should be called onload (and unload). So you should use:
But why do you need to reset the menu when the page is unloaded?
Note: You can also use anonymous functions as the onload handler :)