Clicking browser back button auto-activates event listener

Question

I have a strange problem that only occurs in some browsers which I cannot find a solution to anywhere.

Here's the objective:

Make a simple page with a hyperlink. When the hyperlink is clicked, a box immediately appears telling the user to wait while the next page is being fetched from the network. If the visitor doesn't have javascript, then the box won't appear and the next page would attempt to load. The non-javascript version is fine, but the javascript version gives problems.

In Firefox version 123.0 and on Chrome 122 for Windows 10, I have the problem where if a user attempts to load the next page then clicks the back button on their browser, the box appears automatically (which should not happen).

In Seamonkey 2.53.18.2 everything works correctly.

Here is the PHP code I used that can reproduce the problem. Heck, the problem may also be reproduced without using the PHP portion.

<?php
//this code fragment simulates when the resource was last updated
//so then I load the resource once and generate status 304 when user clicks the back button

date_default_timezone_set('America/Toronto');
$uset=strtotime("2024-04-13 6:20PM"); 
$lmod=gmdate("D, d M Y H:i:s T",$uset);
$ifms=$_SERVER["HTTP_IF_MODIFIED_SINCE"];
header('Last-Modified: '.$lmod,true);
if (isset($ifms{1}) && $ifms===$lmod){
header('HTTP/1.1 304 NM',true);exit();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<style>
#wbox{
display:none;
border-radius:1em;
border:1px solid black;
background:#FFFFAA;
color:#000000
}
</style>
</head>
<body>
<h1>Content loader</h1>
<a ID="clickee" href="something.htm">Click here</a>
<div ID="wbox">
<h2>Loading contents...</h2>
</div>
<script>
function showbox(){
document.getElementById('wbox').style.display="block";
}
document.getElementById('clickee').addEventListener("click",showbox);
</script>
</body>
</html>

Could it be that the new browsers are experiencing bugs or is there something I can do to my code to prevent the "loading contents" box from automatically appearing when the user returns to the page by clicking the "back" button.

Oh, and if the user clicks the refresh/reload button after clicking the back button, the problem goes away but its an inconvenience to click 2 buttons when only 1 should be clicked.

As mentioned above, I tested my code in multiple browsers. the "loading contents" box should only appear when leaving the page, not when re-entering the page by use of the browser's "back" button.

I think back button really does not reload the page on modern browser that is done for optimization. What I think you can do is to have a logic to hide the wbox if the user leaves the page and when the changed location(by pressing back button) — Renz Salanga
– Renz Salanga, Commented Apr 14, 2024 at 0:43

Christian · Accepted Answer · 2024-04-14 03:11:05Z

It seems like the page does not trigger load when back button was clicked.

Here is the simplest trick to achieve what you need. Replace the content of the body with this:

<h1>Content loader</h1>
<a onclick="showbox(true)" href="something.htm">Click here</a>
<div ID="wbox">
<h2>Loading contents...</h2>
</div>
<script>
function showbox(show){
    document.getElementById('wbox').style.display = show ? "block" : "none";
}

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        showbox(false);
    }
});
</script>

Note that I modified your code to directly call the showbox() from the a tag, and I also added param true or false (show it or hide it) so we can use the single function to do it.

I added event listener for visibility change so when you already left the page when the link was clicked (which means the page is no longer visible), the wbox will hide.

Collectives™ on Stack Overflow

Clicking browser back button auto-activates event listener

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related