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

Je suis un débutant quand il s'agit de js, donc je suis désolé si je manque quelque chose de vraiment simple.

Fondamentalement, j'ai fait des recherches sur l'utilisation de l'historique.pustate et du popstate et je l'ai créé, donc une chaîne de requête est ajoutée à la fin de l'url ( ?v=images ) ou ( ?v=profile ) … ( v signifiant 'view') en utilisant ceci:

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

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

J'ai alors utilisé ce code:

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

En $(document).ready() section et plus tard essayé en seulement <script> tags <script> et n'a pas fonctionné.

Je ne sais pas comment le faire pour que le contenu change lorsque j'utilise le bouton Retour ou, au moins, je le fais pour que je puisse déclencher ma propre fonction; Et je suppose qu'il a quelque chose à voir avec l'objet d'état? Je ne peux tout simplement pas trouver quelque chose en ligne qui explique clairement le processus.

Si quelqu'un pouvait m'aider, ce serait génial et je vous remercierai à l'avance de tous ceux qui le font.

Le popstate ne contient qu'un état s'il y en a un.

Quand cela se passe comme ceci:

Page initiale chargée
Nouvelle page chargée, avec état ajouté via pushState
Bouton arrière enfoncé

Alors il n'y a pas d'état, car la page initiale a été chargée régulièrement, pas avec pushState . En conséquence, l'événement onpopstate est déclenché avec un state null . Donc, quand il est null , cela signifie que la page d'origine devrait être chargée.

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

 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);