Actualização da url sem refresh da página

Hoje vamos falar sobre um recurso bastante interessante dos nossos browsers, que nos permite fazer a alteração das informações das páginas que acedemos, inclusive a URL que é mostrada na barra de endereço do seu browser, sem fazer o uso do refresh e o melhor: mantendo o histórico…

Com as tecnologias cada vez mais a puxar para uma programação amiga do utilizador, deixando de lado os refresh’s frequentes e apostando cada vez mais em animações para que o utilizador não perceba do refresh, necessário, da página.

Provavelmente já deve ter feito algumas páginas mais dinâmicas que outras, usando e abusando de tecnologias como JavaScript, mas algo que deve ter reparado é que ficou tudo… igual, apenas se actualiza a “div” que queríamos.

Este post mostra a possibilidade, de muitas, que o HTML5 nos presenteou. A Actualização fácil de url sem refresh, mantendo o histórico, é agora possível, deixando assim de lado o famoso “location.hash”.

Método history.pushState

Este método adiciona um novo registo no histórico de sessão, mantendo assim o histórico.

window.history.pushState(data, title [, url ])

Método history.replaceState

Os dois métodos são bastante semelhantes. A grande diferença, entre eles, é que o pushState regista uma entrada nova, mantendo assim o histórico. O replaceState, como o nome indica, substituí o registo existente no histórico pelos dados contidos no método.

window.history.replaceState(data, title [, url ])

Sintaxe

Data: parâmetro, útil, caso utilize o evento onPopState.

Title: É o, novo, título da página.
URL: É a, nova, URL da página. Utilizando “https://criarestilosnet.com/” ou “/novo/url/”
Exemplo:

window.history.replaceState('Object', 'Titulo da Página', '/novo/url/');

Jquery:

$('#nav-menu a')​​.click(function(e){
  e.preventDefault();
  window.history.pushState({url: "" + $(this).attr('href') + ""}, $(this).attr('title') , $(this).attr('href'));
 });​
 
$(window).bind("popstate", function(e) {
  $('#nav-conteudo').load(e.state.url);
});

Compatibilidade

Os seguintes browsers: Chrome, Opera, Safari e Firefox 4+; Já têm estes métodos de forma nativa. Para os browsers antigos podemos utilizar o “location.hash” para obter um efeito parecido. Ou em alternativa ao “location.hash”, utilizar de forma crossbrowser, fazendo uso da biblioteca History.js. Tendo assim resultados semelhantes em vários browsers, utilizando algo assim:

if(window.history.pushState) {
    // caso funcione
} else {
    // caso não funcione
}

Já conhecia? Usa que técnica? Comente!

---

---