Pressing the back button does not trigger <body>'s OnLoad_问答_开发者

Pressing the back button does not trigger <body>'s OnLoad

开发者 https://www.devze.com 2022-12-11 02:12 出处：网络

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

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 anima开发者_运维问答tion (displayed) is saved.

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

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';">

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".