PushState no HTML – Pra mudar a url do browser sem dar Refresh

Lembro até hoje o dia que ví um site mudando a url do navegador sem dar refresh: “que bruxaria é essa?”. Era um tema de blogspot que o Google tinha desenvolvido.

A função pushState do objeto History do javascript serve pra isso. Altera a url sem recarregar a página, desde que seja no mesmo domínio.

Veja os dois exemplos. Clique e depois olhe a sua barra de endereços:

Exemplo 1: /teste

Exemplo 2: /url-falsa-sem-dar-refresh

A função é simples.

history.pushState(data,titulo,nova_url);

O primeiro parâmetro serve pra passar informações ao objeto history (dá pra passar até 640 kbytes de váriaveis) pra ser acessado depois.
O segundo parâmetro seria o título da página.
O terceiro parâmetro é a url relativa que você vai passar “/teste” foi usado no exemplo. Obviamente, a url tem que ser do mesmo domínio da url original.

Ou seja, o exemplo foi feito assim:

<a href="#" onclick="history.pushState('teste','Titulo de teste','/teste'); return false;">/teste</a></h2>

Mas o que dá pra fazer com isso?

Dá pra fazer Single Page Aplications que tenham, de verdade, links únicos sendo tudo indexado pelos buscadores de maneira correta.

Antigamente, se trabalhava com location.hash ( tipo http://www.site.com#!/quem-somos )

E com isso, chamando a url corretamente é possível controlar a mesma página via server side para deixar uma resposta pra Ajax e outra normal.

if( (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')){
    include('header.php');
}

// conteudo

if( (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')){
    include('footer.php');
}

Essa funcionalidade já está disponível pra Safari, Chrome, Firefox, IE10, etc..
Só no IE9 que não funciona.

De toda forma, recomendo (muito) o uso disso pra aplicações mobile.

Leave a Reply

Your email address will not be published. Required fields are marked *