javascript - onpopstate - window history replacestate({}

¿Puedo evitar que history.popstate se active en la carga de la página inicial?

Question

Estoy trabajando en un sitio que sirve contenido a través de AJAX.

Si hace clic en un elemento del menú, una $.get contenido se actualiza con la respuesta de $.get , nada del otro mundo.

Estoy implementando history.pushState para permitir la navegación con el botón de avance / retroceso del navegador.

Tengo lo siguiente para cargar contenido en la navegación del historial:

$(function() {
    $(window).bind("popstate", function() {
        $.getScript(location.href); 
    });
});

El problema es que cuando se carga una página por primera vez, esta función hace $.getScript por lo que la página se carga de nuevo inmediatamente. La primera vez que se carga la página, se muestra la vista HTML inicial, luego, en la segunda carga, se muestra la vista JS, ya que es una solicitud JS.

¿Cómo podría evitar que este evento se dispare en páginas con solicitudes HTML?

Answer 1

Al usar la API nativa del historial de HTML5, se encontrará con algunos problemas, cada navegador HTML5 maneja la API de manera un poco diferente, por lo que no puede codificarla solo una vez y esperar que funcione sin implementar soluciones alternativas. History.js proporciona una API de navegador cruzado para la API de historial HTML5 y un hashchange opcional para los navegadores HTML4 si desea seguir esa ruta.

Para actualizar su sitio web a una aplicación RIA / Ajax puede usar este fragmento de código: https://github.com/browserstate/ajaxify

Lo que forma parte del artículo más extenso Intelligent State Handling, que contiene explicaciones sobre hashbang, hashes y el api de la historia html5.

Déjame saber si necesitas más ayuda :) Saludos.

Answer 2

Cuando el evento popstate se activa con la carga de la página, no tendrá una propiedad de estado en el objeto del evento. Esto le permite verificar si el evento se activa para una carga de página o no.

window.onpopstate = function (event) {
  if (event.state) {
    // do your thing
  } else {
    // triggered by a page load
  }
}

Answer 3

Cuando el navegador se carga por primera vez, siempre dispara un evento popstate. Así que necesitas determinar si este popstate es tuyo o no.

Cuando haga su pushState, asegúrese de tener un objeto de estado. De esa manera puedes comprobarlo más tarde.

Luego, en el controlador de estado pop, compruebe el objeto de estado :)

$(function() {
    $(window).bind("popstate", function(data) {
        if (data.state.isMine)
            $.getScript(location.href); 
    });
});

// then add the state object
history.pushState({isMine:true},title,url);

Déjame saber si necesitas más ayuda :)

Answer 4

Necesitas obtener el evento.originalEvent

// Somewhere in your previous code
if (history && history.pushState) {
  history.pushState({module:"leave"}, document.title, this.href);
}


$(window).bind("popstate", function(evt) {
  var state = evt.originalEvent.state;
  if (state && state.module === "leave") {
    $.getScript(location.href);
  }
});

Answer 5

Utilizo esto para cambiar la dirección de la barra y guardar el estado actual, incluido el cuerpo html actual, y lo recargo en la parte posterior del clic sin hacer ninguna otra llamada ajax. Todo está guardado en su navegador:

1. $(document).ajaxComplete(function(ev, jqXHR, settings) {
   
       var stateObj = { url: settings.url, innerhtml: document.body.innerHTML };
       window.history.pushState(stateObj, settings.url, settings.url);
   });
   
   
   window.onpopstate = function (event) {
       var currentState = history.state;
       document.body.innerHTML = currentState.innerhtml;
   };