Javascript РVoltar e Avan̤ar com History

Os navegadores em sua maioria os mais famosos, oferecem o recurso de voltar e avançar páginas (back e foward).

Esse mesmo resultado pode ser obtido através do uso de javascript, com alguns possíveis ajustes para deixar essa função ainda mais personalizada a sua aplicação ou página.

O objeto history faz parte do objeto window e pode ser acessado a partir de window.history.

Ele possui uma propriedade (lenght) para saber o tamanho do array de resultados armazenados para navegação.

E 3 três métodos, o back, o foward e o go.

Com back(), como o próprio nome já sugere, nós podemos voltar páginas.

Com foward(), nós avançamos na lista do array pegando a próxima página se houver.

E com go(), nós podemos ir diretamente a qualquer elemento do array.

Se não me engano, esta função pode ser utilizada no IE a partir da versão 4, no Firefox desde a versão 1, e no Opera a partir da versão 9.

Vejamos alguns exemplos:

<script type="text/javascript">
alert(history.length);
</script>

Retorna um valor numérico inteiro. Como por exemplo 3.

<input type="button" value="voltar" onclick="window.history.back()">

Aqui podemos fazer a chamada por exemplo dentro de um botão, que ao ser clicado nos leva a página anterior.

<input type="button" value="avancar" onclick="window.history.forward()">

Mesma lógica do exemplo anterior, porém agora avançando uma página.

<input type="button" value="voltar" onclick="window.history.go(-1)">

Aqui teremos o mesmo resultado de back(), pois estamos indicando que queremos retornar uma página (-1), caso fossem 2 páginas atrás, faríamos (-2), a mesma coisa vale para avançar, (1) ou (2).

Basicamente é isso. Agora é usar com moderação.

Sucesso!