logo标签列表

window.onload/onunload和body.onload/onunload之间的区别

javascriptwindowonloadonunload
3
我已经阅读了关于window.onload vs <body 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”页面不会发生这种情况。为什么？
虽然这是一个测试，但我的目标是在一个aspx页面上使用RegisterStartupScript或RegisterClientScriptBlock来做类似的事情，因此我希望能够重现“测试1”的行为，而不使用body onload/onunload，而是使用window.onload/onunload。
3
“window.onload = resetMenu()”应该改为“window.onload = resetMenu”。同样适用于“window.onunload”。这个修改是否对你的问题有影响？ - Crescent Fresh
1个回答
2

使用Crescent是正确的，方法如下：

window.onload = resetMenu();

你把window.onload赋值为resetMenu函数的返回值，而不是提供应该在onload（和unload）时调用的函数。因此，你应该使用：

window.onload = resetMenu;
window.onunload = resetMenu;

但是为什么需要在页面卸载时重置菜单？

注意：您也可以使用匿名函数作为onload处理程序 ：）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接