window.history.pushState javascript – trocando a URL usando api html5 em páginas carregadas com ajax
Bem simples, só editei o trecho que era necessário para enviar um history.pushState, no final da requisição ajax, que carrega a página em uma div, sem dar refresh no restante do site.
http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var response = $( '<div>'+response+'</div>' );
var data = response.find('#content').html();
//apenas atrasando a troca, para mostrarmos o loading
window.setTimeout( function(){
content.fadeOut('slow', function(){
content.html( data ).fadeIn();
var title = response.find('title').text();
window.history.pushState( href, title, href );
document.title = title;
});
}, 500 );
}
});
Notem a linha:
window.history.pushState( href, response.find('title'), href );
É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.
Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/
Demonstração
É isso. Dúvidas ? pergunte, comente!