How can I ignore window.onpopstate on page load?

Posted on

How can I ignore window.onpopstate on page load? – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about How can I ignore window.onpopstate on page load?.

Problem :

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.


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!

Solution :

Check for boolean truth of event.state in popstate event handler:

window.addEventListener('popstate', function(event) {
    if (event.state) {
}, 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.

I had a similar problem and i had to validate to make sure if page was loaded completely.

I used something like this :

var page_loaded = false;    
window.onpopstate = function(event){
       page_loaded = true;
       return false;
    //Continue With Your Code

To react on popstate event, you need to push some state onto the session history.

For example add this line to the document ready section:

history.pushState(null, null, window.location.pathname);

Not ideal, but it works in Chrome, Firefox and other browsers as well.

Then the event is fired correctly when user clicks on Back or Forward button, also when history.back(), history.forward(), history.go() methods are called manually. Each time when popstate has been invoked, you have to push another state again to make it working.

See also:

It seems none of the browsers are emitting the event on page load any more as of today:

Browsers used to handle the popstate event differently on page load, but now they behave the same. Firefox never emitted a popstate event on page load. Chrome did until version 34, while Safari did until version 10.0.


Leave a Reply

Your email address will not be published. Required fields are marked *