Cómo activar el cambio cuando se utiliza el botón atrás con el historial.pushstate y popstate?

Question

Cómo activar el cambio cuando se utiliza el botón atrás con el historial.pushstate y popstate?

Soy prácticamente un novato cuando se trata de js, así que lo siento si me estoy perdiendo algo realmente simple.

Básicamente, he hecho algunas investigaciones sobre el uso de la historia.pustate y popstate y lo he hecho para que se agregue una cadena de consulta al final de la url (?v=images) o (?v=profile)...(v que significa 'vista') usando esto:

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

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

Entonces usé esto código:

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

En la sección $(document).ready() y más tarde intentó dentro de solo etiquetas <script> y ninguno funcionó.

No se como hacer que el contenido cambie cuando uso el botón atrás o al menos lo hace para que pueda activar mi propia función para hacerlo; y estoy asumiendo que tiene algo que ver con el objeto state?! Simplemente no puedo encontrar nada en línea que explique el proceso claramente.

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

39

javascript html5 back-button pushstate

Author: Ross Wilson, 2011-11-07

Source

2 answers

Tal vez no sea la mejor solución, y tal vez no se adapte a sus necesidades. Pero para mí era mejor simplemente recargar la página. Por lo tanto, la página es consistente y carga todo de acuerdo con la cadena de consultas actual.

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

3

Author: Jiří Herník,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-22 10:26:25

score 46 · Accepted Answer

El popstate solo contiene un estado cuando hay uno.

Cuando va así:

página inicial cargada
nueva página cargada, con el estado añadido a través de pushState
botón atrás presionado

Entonces no hay estado, porque la página inicial se cargó regularmente, no con pushState. Como resultado, el evento onpopstate se dispara con un state de null. Así que cuando es null, significa que la página original debe ser cargada.

Se podría implementar tal que history.pushState se llamará constantemente y solo necesita proporcionar una función de cambio de estado como esta: Haga clic aquí para 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);