hice un Tema de WordPress habilitado para Ajax con la característica principal de que los enlaces internos no recargan toda la página sino solo el nuevo contenido. Entonces, cuando se cambia el hash de la URL, el nuevo contenido se coloca en la sección #principal y el mapa en segundo plano permanece intacto:
var $mainContent = $("#primary")
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
});
});
Todo funciona bien, también el historial de navegación hacia adelante y hacia atrás. Puedes consultar la funcionalidad básica aquí.
Ahora quiero buenas URL que oculten los hashes, por ejemplo, un enlace como http://geraldkogler.com/places/#/places/place/stwst/ se cambia a http://geraldkogler.com/places/place/stwst/. Hago esto agregando este código a la línea 47 de ajax.js:
var oPageInfo = {
title: "places",
url: window.location.origin+window.location.hash.substring(1)
}
window.history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
Ahora la URL se reescribe, pero el historial ya no funciona.
Entonces, creo que debería escuchar los eventos popstate, trato de hacer lo siguiente y así funciona una vez, pero no más:
window.onpopstate = function(event) {
if (event.state) {
var host = "http://"+location.hostname;
location.hash = event.state.url.substring(host.length);
}
};
Este comportamiento (incorrecto) con el código mencionado se muestra en esta página. ¿Alguna idea de lo que estoy haciendo mal en ajax.js?
.