按下后退按钮不会触发 <body> 的 OnLoad答案

【问题标题】：Pressing the back button does not trigger <body>'s OnLoad按下后退按钮不会触发 <body> 的 OnLoad
【发布时间】：2009-11-18 03:06:58
【问题描述】：

我的结帐购物车在 (2) 提交后会显示 (1) 动画“处理订单...”，并且卡片正在 php 脚本中处理。但是，当用户到达“接受订单”页面并按下返回按钮时会触发一个错误。 “处理订单...”动画仍然显示。

(1)加工显示如下：

<div style="position:absolute;display:none;" id="animation">
    <img src="animation.gif"/>
</div>

(2) 按钮提交时，使用的javascript：

onClick="document.getElementById('animation').style.display='block';
         document.the_form.submit();"

所以，点击按钮，显示动画，提交表单，处理卡片，用户进入新页面。

当用户点击返回时，我们应该期待一个没有动画的页面。但是，onLoad 没有被触发，动画的最后一个状态（显示）被保存了。

知道当用户返回页面时如何移除动画吗？

【问题讨论】：

我也有同样的问题，请问您解决了吗？我不想使用onunload，正如答案中所建议的那样，因为它会给用户造成混淆，因为这将按如下方式工作：“处理顺序”显示出来，它被隐藏（ononload）， page is visible for a while, page重新加载。

【解决方案1】：

受 Adam A 评论的启发，您可以在用户离开页面时隐藏动画（通过表单提交是正常的路线，我怀疑）所以如果/当返回页面时，动画不会显示.

实现此目的的一种方法是将隐藏代码添加到 HTML 正文的 onunload 事件中。

<body onunload="document.getElementById('animation').style.display='none';">

【讨论】：

【解决方案2】：

在大多数现代浏览器中，单击返回不会重新加载页面，它只是从内存中显示它最后一次记住它（因为这可能是所需的行为）。

在我有限的 UI 设计经验中，我不确定为什么您希望用户在提交订单后单击“返回”按钮，相反，您应该提供一个链接，将他们带到他们可能希望执行的下一个任务完成，或将它们转发到具有有用任务的新页面，并在某处显示“谢谢，您的订单已被接受”的消息。

【讨论】：