html - 按下后退按钮不会触发 OnLoad

Question

我的结帐购物车在（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 没有被触发，并且动画的最后状态（显示）被保存。

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

2 回答 2