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

发布于 2024-08-14 11:56:05 字数 2442 浏览 7 评论 0原文

我已阅读问题的答案 window.onload 与 。在该问答中,许多人声称 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 页面上执行类似的操作,因此我希望能够在不使用主体 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

锦上情书 2024-08-21 11:56:05

Crescent 是正确的,通过使用:

window.onload = resetMenu();

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

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

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

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

Crescent is correct, by using:

window.onload = resetMenu();

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:

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

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 :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文