replacestate - Historial del navegador ajax de jquery con window.history.pushState y fallback

window.history clear

Question

Quiero implementar un historial de navegación usando jQuery y AJAX de forma cruzada. Mi enfoque es usar window.history.pushState y recurrir a un hash url /#!/url en los navegadores que no son compatibles con window.history.pushState .

Por ejemplo:

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

En los navegadores compatibles con window.history.pushState , al hacer clic en uno de estos enlaces, se debe cambiar la dirección sin actualizar la página a http://domain.com/home , http://domain.com/about , etc. Cuando el navegador no es compatible. window.history.pushState , debe usar un identificador de fragmento, es decir: http://domain.com/#!/home , http://domain.com/#!/about .

Actualización: En base a los comentarios aquí, he implementado Ajax SEO ( git ) que usa jQuery Address para la API de historial de HTML5 con la antigua opción de reemplazo del navegador a /#!/url .

Answer 1

Algo que he estado usando con las URL hash de respaldo:

History = History || {};
History.pathname = null;
History.previousHash = null;
History.hashCheckInterval = -1;
History.stack = [];
History.initialize = function () {
if (History.supportsHistoryPushState()) {
History.pathname = document.location.pathname;
$(window).bind("popstate", History.onHistoryChanged);
} else {
History.hashCheckInterval = setInterval(History.onCheckHash, 200);
}
};
History.supportsHistoryPushState = function () {
return ("pushState" in window.history) && window.history.pushState !== null;
};
History.onCheckHash = function () {
if (document.location.hash !== History.previousHash) {
History.navigateToPath(document.location.hash.slice(1));
History.previousHash = document.location.hash;
}
};
History.pushState = function (url) {
if (History.supportsHistoryPushState()) {
window.history.pushState("", "", url);
} else {
History.previousHash = url;
document.location.hash = url;
}
History.stack.push(url);
};
History.onHistoryChanged = function (event) {
if (History.supportsHistoryPushState()) {
if(History.pathname != document.location.pathname){
History.pathname = null;
History.navigateToPath(document.location.pathname);
}
}
};
History.navigateToPath = function(pathname) {
History.pushState(pathname);
// DO SOME HANDLING OF YOUR PATH HERE
};

Podrías vincular tus eventos de clic a esto con:

$(function(){
$("a").click(function(){
var href = $(this).attr(''href'');
History.navigateToPath( href )
return false;
});
});

Si necesita más explicaciones sobre este ejemplo, estaré encantado de escucharlo.

EDITAR

Por favor mira mi otra respuesta.

Answer 2

Ha pasado un tiempo desde mi respuesta original y ahora sugeriría usar Backbone .

Una implementación podría ser:

// First setup a router which will be the responder for URL changes:
var AppRouter = Backbone.Router.extend({
routes: {
"*path": "load_content"
},
load_content: function(path){
$(''#content'').load(''/'' + path);
}
});
var appRouter = new AppRouter;
// Then initialize Backbone''s history
Backbone.history.start({pushState: true});

Extracto de la documentación:

Para indicar que desea utilizar el soporte de HTML5 pushState en su aplicación, use Backbone.history.start({pushState: true}) . Si desea utilizar pushState , pero si los navegadores no lo admiten de forma nativa, utiliza actualizaciones de página completa en su lugar, puede agregar {hashChange: false} a las opciones.

Y ahora cada vez que se llama Backbone.history.navigate , el AppRouter realizará una carga AJAX de la ruta dentro del div #content .

Para manejar todos los enlaces con AJAX, puede usar lo siguiente:

$("a").on(''click'', function(event){
event.preventDefault();
Backbone.history.navigate( event.currentTarget.pathname, {trigger: true} )
});

Tome nota del {trigger: true} que hace que se llame al controlador en el enrutador (de lo contrario, solo a partir de los cambios de URL)

Violín con código de ejemplo: http://jsfiddle.net/koenpunt/pkAz7/1/

Answer 3

// Assuming the path is retreived and stored in a variable ''path''
if (typeof(window.history.pushState) == ''function'') {
window.history.pushState(null, path, path);
} else {
window.location.hash = ''#!'' + path;
}