window.onload / onunload和body.onload / onunload之间的差异

时间:2009-12-10 22:43:26

标签: javascript window onload onunload

我已阅读问题window.onload vs <body onload=""/>的答案。在该Q&amp; A中,许多人声称window.onloadbody.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页面上做类似的事情,所以我希望能够重新创建“test 1”的行为而不使用body onload / onunload但是使用窗口。的onload / onunload的。

1 个答案:

答案 0 :(得分:2)

Crescent是正确的,使用:

window.onload = resetMenu();

你正在使window.onload等于resetMenu函数的返回值,而不是提供应该被称为onload(和unload)的函数。所以你应该使用:

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

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

注意:您还可以使用匿名函数作为onload处理程序:)