Popstate lors du chargement de la page dans Chrome

J'utilise l'API History pour mon application Web et j'ai un problème. Je fais des appels Ajax pour mettre à jour certains résultats sur la page et j'utilise history.pushState () afin de mettre à jour la barre d'emplacement du navigateur sans recharger la page. Ensuite, bien sûr, j'utilise window.popstate afin de restaurer l'état précédent lorsque le bouton retour est cliqué.

Le problème est bien connu - Chrome et Firefox traitent cet événement popstate différemment. Alors que Firefox ne le lance pas lors du premier chargement, Chrome le fait. Je voudrais avoir le style Firefox et ne pas déclencher l'événement en charge car il met simplement à jour les résultats avec exactement les mêmes lors du chargement. Existe-t-il une solution de contournement sauf en utilisant History.js ? La raison pour laquelle je n'ai pas envie de l'utiliser est - il a besoin de beaucoup trop de bibliothèques JS par lui-même et, comme j'ai besoin qu'il soit implémenté dans un CMS avec déjà trop de JS, je voudrais minimiser JS que je mets dedans .

J'aimerais donc savoir s'il existe un moyen de faire en sorte que Chrome ne lance pas 'popstate' lors du chargement ou, peut-être, que quelqu'un a essayé d'utiliser History.js car toutes les bibliothèques se sont rassemblées dans un seul fichier.

Dans Google Chrome dans la version 19, la solution de @spliter a cessé de fonctionner. Comme @johnnymire l'a souligné, history.state dans Chrome 19 existe, mais il est nul.

Ma solution de contournement consiste à ajouter window.history.state! == null pour vérifier si l'état existe dans window.history:

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

Je l'ai testé dans tous les principaux navigateurs et dans les versions Chrome 19 et 18. Il semble que cela fonctionne.

Si vous ne souhaitez pas prendre de mesures spéciales pour chaque gestionnaire que vous ajoutez à onpopstate, ma solution pourrait vous intéresser. Un gros avantage de cette solution est également que les événements onpopstate peuvent être gérés avant la fin du chargement de la page.

Exécutez simplement ce code une fois avant d'ajouter des gestionnaires onpopstate et tout devrait fonctionner comme prévu (c'est-à-dire comme dans Mozilla ^^) .

(function() {
    // There's nothing to do for older browsers ;)
    if (!window.addEventListener)
        return;
    var blockPopstateEvent = document.readyState!="complete";
    window.addEventListener("load", function() {
        // The timeout ensures that popstate-events will be unblocked right
        // after the load event occured, but not in the same event-loop cycle.
        setTimeout(function(){ blockPopstateEvent = false; }, 0);
    }, false);
    window.addEventListener("popstate", function(evt) {
        if (blockPopstateEvent && document.readyState=="complete") {
            evt.preventDefault();
            evt.stopImmediatePropagation();
        }
    }, false);
})();

Comment ça fonctionne:

Chrome , Safari et probablement d'autres navigateurs Webkit déclenchent l'événement onpopstate lorsque le document a été chargé. Ce n'est pas prévu, donc nous bloquons les événements popstate jusqu'à ce que le premier événement boucle cicle après le chargement du document. Cela est effectué par les appels preventDefault et stopImmediatePropagation (contrairement à stopPropagation, stopImmediatePropagation arrête instantanément tous les appels de gestionnaire d'événements).

Cependant, étant donné que le readyState du document est déjà sur «terminé» lorsque Chrome se déclenche par erreur surpopstate, nous autorisons les événements opopstate, qui ont été déclenchés avant la fin du chargement du document, pour autoriser les appels onpopstate avant le chargement du document.

Mise à jour 23/04/2014: Correction d'un bug où les événements popstate étaient bloqués si le script est exécuté après le chargement de la page.

L'utilisation de setTimeout n'est pas une solution correcte car vous n'avez aucune idée du temps qu'il faudra pour que le contenu soit chargé, il est donc possible que l'événement popstate soit émis après le délai d'expiration.

Voici ma solution: https://gist.github.com/3551566

/*
* Necessary hack because WebKit fires a popstate event on document load
* https://code.google.com/p/chromium/issues/detail?id=63040
* https://bugs.webkit.org/process_bug.cgi
*/
window.addEventListener('load', function() {
  setTimeout(function() {
    window.addEventListener('popstate', function() {
      ...
    });
  }, 0);
});

La solution a été trouvée dans jquery.pjax.js lignes 195-225:

// Used to detect initial (useless) popstate.
// If history.state exists, assume browser isn't going to fire initial popstate.
var popped = ('state' in window.history), initialURL = location.href


// popstate handler takes care of the back and forward buttons
//
// You probably shouldn't use pjax on pages with other pushState
// stuff yet.
$(window).bind('popstate', function(event){
  // Ignore inital popstate that some browsers fire on page load
  var initialPop = !popped && location.href == initialURL
  popped = true
  if ( initialPop ) return

  var state = event.state

  if ( state && state.pjax ) {
    var container = state.pjax
    if ( $(container+'').length )
      $.pjax({
        url: state.url || location.href,
        fragment: state.fragment,
        container: container,
        push: false,
        timeout: state.timeout
      })
    else
      window.location = location.href
  }
})

Une solution plus directe que la réimplémentation de pjax est de définir une variable sur pushState et de vérifier la variable sur popState, de sorte que le popState initial ne se déclenche pas de manière incohérente à la charge (pas une solution spécifique à jquery, juste en l'utilisant pour les événements):

$(window).bind('popstate', function (ev){
  if (!window.history.ready && !ev.originalEvent.state)
    return; // workaround for popstate on load
});

// ... later ...

function doNavigation(nextPageId) {
  window.history.ready = true;

  history.pushState(state, null, 'content.php?id='+ nextPageId); 
  // ajax in content instead of loading server-side
}

L' événement onpopstate initial de Webkit n'a aucun état attribué, vous pouvez donc l'utiliser pour vérifier le comportement indésirable:

window.onpopstate = function(e){
    if(e.state)
        //do something
};

Une solution complète, permettant de revenir à la page d'origine, s'appuierait sur cette idée:

<body onload="init()">
    <a href="page1" onclick="doClick(this); return false;">page 1</a>
    <a href="page2" onclick="doClick(this); return false;">page 2</a>
    <div id="content"></div>
</body>

<script>
function init(){
   openURL(window.location.href);
}
function doClick(e){
    if(window.history.pushState)
        openURL(e.getAttribute('href'), true);
    else
        window.open(e.getAttribute('href'), '_self');
}
function openURL(href, push){
    document.getElementById('content').innerHTML = href + ': ' + (push ? 'user' : 'browser'); 
    if(window.history.pushState){
        if(push)
            window.history.pushState({href: href}, 'your page title', href);
        else
            window.history.replaceState({href: href}, 'your page title', href);
    }
}
window.onpopstate = function(e){
    if(e.state)
        openURL(e.state.href);
};
</script>

Bien que cela puisse encore se déclencher deux fois (avec une navigation astucieuse), il peut être géré simplement avec une vérification par rapport au href précédent.

C'est ma solution de contournement.

window.setTimeout(function() {
  window.addEventListener('popstate', function() {
    // ...
  });
}, 1000);

Voici ma solution:

var _firstload = true;
$(function(){
    window.onpopstate = function(event){
        var state = event.state;

        if(_firstload && !state){ 
            _firstload = false; 
        }
        else if(state){
            _firstload = false;
            // you should pass state.some_data to another function here
            alert('state was changed! back/forward button was pressed!');
        }
        else{
            _firstload = false;
            // you should inform some function that the original state returned
            alert('you returned back to the original state (the home state)');
        }
    }
})   

Le meilleur moyen pour que Chrome ne déclenche pas popstate lors du chargement d'une page est de voter https://code.google.com/p/chromium/issues/detail?id=63040 . Ils savent que Chrome n'est pas conforme aux spécifications HTML5 depuis deux ans maintenant et ne l'ont toujours pas corrigé!

En cas d'utilisation, le event.state !== nullretour dans l'historique à la première page chargée ne fonctionnera pas dans les navigateurs non mobiles. J'utilise sessionStorage pour marquer quand la navigation ajax démarre vraiment.

history.pushState(url, null, url);
sessionStorage.ajNavStarted = true;

window.addEventListener('popstate', function(e) {
    if (sessionStorage.ajNavStarted) {
        location.href = (e.state === null) ? location.href : e.state;
    }
}, false);

Les solutions présentées ont un problème lors du rechargement de la page. Ce qui suit semble mieux fonctionner, mais je n'ai testé que Firefox et Chrome. Il utilise la réalité, qu'il semble y avoir une différence entre e.event.stateet window.history.state.

window.addEvent('popstate', function(e) {
    if(e.event.state) {
        window.location.reload(); // Event code
    }
});

Je sais que vous vous êtes opposé à cela, mais vous devriez vraiment utiliser History.js car il élimine un million d'incompatibilités de navigateur. J'ai suivi la voie de la réparation manuelle pour découvrir plus tard qu'il y avait de plus en plus de problèmes que vous ne découvrirez que plus tard. Ce n'est vraiment pas si difficile de nos jours:

<script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.8/native.history.min.js" type="text/javascript"></script>

Et lisez l'API sur https://github.com/browserstate/history.js

Cela a résolu le problème pour moi. Tout ce que j'ai fait a été de définir une fonction de délai d'expiration qui retarde l'exécution de la fonction suffisamment longtemps pour manquer l'événement popstate qui est déclenché sur pageload

if (history && history.pushState) {
  setTimeout(function(){
    $(window).bind("popstate", function() {
      $.getScript(location.href);
    });
  },3000);
}

Vous pouvez créer un événement et le déclencher après votre gestionnaire de chargement.

var evt = document.createEvent("PopStateEvent");
evt.initPopStateEvent("popstate", false, false, { .. state object  ..});
window.dispatchEvent(evt);

Notez que ceci est légèrement cassé dans Chrome / Safari, mais j'ai soumis le correctif à WebKit et il devrait être disponible bientôt, mais c'est la manière la plus "correcte".

Cela a fonctionné pour moi dans Firefox et Chrome

window.onpopstate = function(event) { //back button click
    console.log("onpopstate");
    if (event.state) {
        window.location.reload();
    }
};