按后退按钮不会触发的 OnLoad

发布于 2024-08-10 18:21:20 字数 576 浏览 2 评论 0原文

我的结账车在 (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,并且会保存动画(显示的)的最后状态。

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

My checkout cart displays (1) an animation for "Processing Order..." after the 's been (2) submitted and the card is being processed in a php script. However, there's a bug triggered when the user has reached the "order accepted" page, and pressed the back button. The "Processing Order..." animation is still displayed.

(1) The processing display is shown like:

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

(2) When the button is submitted, the javascript used:

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

So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.

When the user clicks back, we should expect a page without the animation. But, onLoad isn't triggered, and the last state of the animation (displayed) is saved.

Any idea how to remove the animation when the user returns to the page?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

评论(2

椵侞 2024-08-17 18:21:20

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

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

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

Inspired by Adam A's comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn't shown.

One way to achieve this is adding the hiding code to HTML body's onunload event.

<body onunload="document.getElementById('animation').style.display='none';">
丶情人眼里出诗心の 2024-08-17 18:21:20

在大多数现代浏览器中,单击“后退”不会重新加载页面,它只是从内存中显示它最后记住的内容(因为这可能是所需的行为)。

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

In most modern browsers, clicking back doesn't reload the page, it just displays it from memory as it last remembered it (as this is likely to be the desired behaviour).

In my limited experience of UI design, I'm not sure why you would want users to click the 'back' button after submitting an order, instead you should provide a link that takes them forward to the next task they may wish to complete, or, forward them onto a new page that has useful tasks and simply displays a message somewhere that says "Thanks, your order is accepted".

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