javascript - recargar - window history replacestate({}

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

Question

Soy casi un principiante cuando se trata de js, así que lo siento si me estoy perdiendo algo realmente simple.

Básicamente, he investigado el uso de history.pustate y popstate y lo hice para que se agregue una cadena de consulta al final de la url ( ?v=images ) o ( ?v=profile ) ... ( v significa ''ver'') usando esto:

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

Quiero hacerlo para poder cargar contenido en un div pero sin volver a cargar la página que he hecho usando la función .load() .

Entonces utilicé este código:

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

en la sección $(document).ready() y luego probé con solo las etiquetas <script> y ninguna funcionó.

No sé cómo hacerlo, por lo que el contenido cambia cuando uso el botón Atrás o al menos lo hago para que pueda activar mi propia función para hacerlo; ¡¿Y supongo que tiene algo que ver con el objeto de estado ?! Parece que 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 va así:

1. página inicial cargada
2. Nueva página cargada, con estado agregado a través de pushState
3. botón de retroceso presionado

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

Puede implementarlo de manera que se llame consistentemente a history.pushState y solo necesite proporcionar una función de cambio de estado como esta: Haga clic aquí para obtener el enlace 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);

Answer 2

Tal vez no sea la mejor solución, y tal vez no se adapte a sus necesidades. Pero para mí era mejor recargar la página. Así que 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();
    });
});