Estoy trabajando en un sitio que ofrece contenido a través de AJAX.
Si hace clic en un elemento del menú, se actualiza una división de contenido con la respuesta $.get , nada especial.
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 el historial de navegación:
$(function() { $(window).bind("popstate", function() { $.getScript(location.href); }); }); El problema es que, cuando una página se carga por primera vez, esta función hace $.getScript para que la página se cargue inmediatamente de nuevo. La primera vez que se carga la página, presenta la vista HTML inicial, luego, en la segunda carga, presenta la vista JS, ya que es una solicitud JS.
¿Cómo puedo evitar que este evento se active en páginas con solicitudes HTML?
Al usar la API de historial de HTML5 nativa, se encontrará con algunos problemas, cada navegador HTML5 maneja la API de manera un poco diferente, por lo que no puede codificarla una vez y esperar que funcione sin implementar soluciones alternativas. History.js proporciona una API de navegador cruzado para la API de historial de HTML5 y un respaldo opcional de cambio de hashchange para 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
Que es parte del artículo más largo Manejo de estado inteligente que explica las explicaciones sobre hashbang, hashes y la API de historial html5.
Avísame si necesitas más ayuda :) Saludos.
Necesita 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); } });Cuando el evento popstate se activa al cargar la página, no tendrá una propiedad de estado en el objeto del evento. Esto le permite verificar si el evento se activa para cargar una página o no.
window.onpopstate = function (event) { if (event.state) { // do your thing } else { // triggered by a page load } }