web-dev-qa-db-fra.com

Comment déclencher un changement lors de l'utilisation du bouton de retour avec history.pushstate et popstate?

Je suis à peu près un novice en ce qui concerne js, donc je suis désolé si je manque quelque chose de vraiment simple.

Fondamentalement, j'ai fait des recherches sur l'utilisation de history.pustate et popstate et je l'ai fait pour qu'une chaîne de requête soit ajoutée à la fin de l'url (?v=images) Ou (?v=profile ) ... (v signifiant 'vue') en utilisant ceci:

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

Je veux faire en sorte que je puisse charger du contenu dans un div mais sans recharger la page que j'ai faite en utilisant la fonction .load().

J'ai ensuite utilisé ce code:

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

dans la section $(document).ready() et essayé plus tard avec seulement <script> balises et aucun n'a fonctionné.

Je ne sais pas comment faire pour que le contenu change lorsque j'utilise le bouton Retour ou au moins pour que je puisse déclencher ma propre fonction pour le faire; et je suppose que cela a quelque chose à voir avec l'objet d'état?! Je n'arrive pas à trouver quoi que ce soit en ligne qui explique clairement le processus.

Si quelqu'un pouvait m'aider, ce serait incroyable et merci d'avance à tous ceux qui le font!

javascripthtml5back-buttonpushstate
45
Rwd

popstate contient uniquement un état lorsqu'il y en a un.

Quand ça se passe comme ça:

  1. page initiale chargée
  2. nouvelle page chargée, avec état ajouté via pushState
  3. bouton retour enfoncé

alors il n'y a pas d'état, car la page initiale a été chargée régulièrement, pas avec pushState. Par conséquent, l'événement onpopstate est déclenché avec un state de null. Ainsi, quand il s'agit de null, cela signifie que la page d'origine doit être chargée.

Vous pouvez l'implémenter de telle sorte que history.pushState sera appelé de manière cohérente et il vous suffit de fournir une fonction de changement d'état comme celle-ci: Cliquez ici pour le lien jsFiddle

function change(state) {
    if(state === null) { // initial page
        $("div").text("Original");
    } else { // page added with pushState
        $("div").text(state.url);
    }
}

$(window).on("popstate", function(e) {
    change(e.originalEvent.state);
});

$("a").click(function(e) {
    e.preventDefault();
    history.pushState({ url: "/page2" }, "/page2", "page 2");
});

(function(original) { // overwrite history.pushState so that it also calls
                      // the change function when called
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);
52
pimvdb

Ce n'est peut-être pas la meilleure solution, et peut-être qu'elle ne répond pas à vos besoins. Mais pour moi, il était préférable de simplement recharger la page. La page est donc cohérente et charge tout selon la chaîne de requête actuelle.

$(document).ready(function() {
    $(window).on("popstate", function (e) {
        location.reload();
    });
});
8
Jiří Herník