I'm playing with window.onpopstate
, and there is a thing that annoys me a little bit:
Browsers tend to handle the popstate event differently on page load. Chrome and Safari always emit a popstate event on page load, but Firefox doesn't.
source
I tested it, and yeah, in Chrome and Safari 5.1+ the popstate event is fired on page load, but not in Firefox or IE10.
The problem is, that I want to listen only to popstate
events where user clicked the back or forward button (or the history was changed via javascript), but don't want to do anything on pageload.
By other words I want to differentiate the popstate
event from page load from the other popstate
events.
This is what I tried so far (I'm using jQuery):
$(function() { console.log('document ready'); setTimeout(function() { window.onpopstate = function(event) { // Do something here }, 10); });
Basically I try to bind my listener
function to popstate
late enough to be not bound on page load, only later.
This seems to work, however, I don't like this solution. I mean, how can I be sure that the timeout chosen for setTimeout is big enough, but not too big (because I don't want it to wait too much).
I hope there is a smarter solution!
The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history. back() or history. forward() in JavaScript). Browsers tend to handle the popstate event differently on page load.
related: call e. stopImmediatePropagation() to prevent subsequently-added popstate handlers from firing too. For instance, if a router listens to popstate and replaces content accordingly, you can prevent it from replacing content. The text you insist on re-adding isn't appropriate; stop rolling back.
Check for boolean truth of event.state
in popstate
event handler:
window.addEventListener('popstate', function(event) { if (event.state) { alert('!'); } }, false);
To ensure this will work, always specify a non-null
state argument when calling history.pushState()
or history.replaceState()
. Also, consider using a wrapper library like History.js that provides consistent behavior across browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With