CODEWITHSUNDEEP
google-chromedom-events
Dave Isaacs
Dave Isaacs

Reputation: 4539

onpopstate handler not firing in Chrome, unless mouse click occurs before hitting back button

I've recently stumbled across the weird behaviour in Chrome on OSX. When loading a certain page, I am pushing a new page into the window history so that if the user clicks the back button the new page is loaded, instead of the page they just came from.

I am using replaceState and pushState to modify the history, and setting on an onpopstate handler to load the new page when the back button is clicked.

In Chrome, however, this doesn't work, except if the user clicks anywhere on the page (or presses any key) before clicking the back button.

I can't seem to demo this on a fiddle, but if you setup the following you should be able to reproduce the behaviour

page1.html

<html>
<body>
<h1>This is page 1</h1>
<a href="page3.html">Go to page 3</a>
</body>
</html>

page2.html

<html>
<body>
<h1>This is page 2</h1>
<p>Well, how did you get here?</p>
</body>
</html>

page3.html

<html>
<body>
<h1>This is page 3</h1>
<p>Why don't you go back to page 1?</p>
<script>
history.replaceState(null, '', 'page2.html');
history.pushState(null, '', 'page3.html');
window.onpopstate = function(event) {
  console.log("Reloading page in onpopstate handler");
  window.location = document.location
}
console.log("Push page2.html to history");
</script>
</body>
</html>

Then start simple webserver in the same directory (e.g., python -m SimpleHTTPServer 8000) and open localhost:8000/page1.html in Chrome.

I expect that you should be able to click the link to page 3, and then immediately click the back button and end up on page 2. But you don't, you end up back on page 1.

However, if you click the link to page 3, then click anywhere on the page, and then click the back button, you end up on page 2 as expected. Hitting any key before clicking the back button also works.

In Firefox and Safari, you always end up on page 2 as expected.

I'm running OSX 10.14.5 and Chrome 75.0.3770.100.

Upvotes: 2

Views: 1560

Answers (1)

Shivani
Shivani

Reputation: 76

Chrome 75 has the history manipulation intervention launched.

Here is the announcement/more details.

Summary of the intervention:

Some pages make it difficult or impossible for the user to go back to the page they came from via the browser back button. This is accomplished by redirects or by manipulating the browser history and results in an abusive/annoying user experience. This intervention makes the browser's back button consistent and prevents abuse. The new behavior of the browser’s back button will be to skip over pages that added history entries or redirected the user without ever getting a user gesture. Note that the intervention only impacts the browser back/forward button UI and not the history.back/forward APIs.

In this specific example, on pressing back, the user is taken to the last page they visited (page 1) and not to a new page. This is in line with user's expectations of the browser's back button.

Upvotes: 6

Related Questions