Cómo desencadenar un cambio cuando se usa el botón Atrás con history.pushstate y popstate?

Question

Soy bastante novato cuando se trata de js, así que lamento si me falta algo realmente simple.

Básicamente, he hecho algunas investigaciones sobre el uso de la history.pustate y popstate y lo he hecho por lo que se añadió una cadena de consulta al final de la URL (?v=images) o (?v=profile) ... (v que significa 'ver') mediante el uso de esto:

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

quiero hacer, así que puede cargar contenido en un div, pero sin volver a cargar la página que he hecho usando la función .load().

Luego utiliza este código:

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

en $(document).ready() sección y después trataron en tan sólo <script> etiquetas y tampoco funcionó.

No sé cómo hacerlo, así que el contenido cambia cuando uso el botón Atrás o al menos lo hago para que pueda activar mi propia función; y supongo que tiene algo que ver con el objeto de estado ?! Simplemente no puedo encontrar nada en línea que explique claramente el proceso.

¡Si alguien pudiera ayudarme sería increíble y gracias de antemano a cualquiera que lo haga!

Answer 1

El popstate solo contiene un estado cuando hay uno.

Cuando dice así:

1. página inicial cargado
2. nueva página cargado, con el estado añadió a través de pushState
3. vuelta botón pulsado

entonces no hay Estado, porque la página inicial se cargó regularmente, no con pushState. Como resultado, el evento onpopstate se desencadena con un state de null. Entonces, cuando es null, significa que la página original debe estar cargada.

Se podría implementarlo de manera que history.pushState se llamará constantemente y sólo es necesario para proporcionar una función de cambio de estado de esta manera: Click here for 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); 

Answer 2

Tal vez no es la mejor solución, y tal vez no se ajusta a su necesariamente. Pero para mí, lo mejor era simplemente volver a cargar la página. Entonces la página es consistente y carga todo de acuerdo con la cadena de consulta actual.

$(document).ready(function() { 
    $(window).on("popstate", function (e) { 
     location.reload(); 
    }); 
});