Botão Voltar para IE
Depois de alguns aprimoramentos, essa técnica se tornou muito melhor. Como esse post está desatualizado, considere ler sua continuação: Histórico para Navegação via JavaScript.
Como todos já devem saber, meu código para simular o botão voltar não funciona no IE. Mas, inspirado na idéia de Mike Stenhouse, apresentada a mim pelo Cau Guanabara, criei um código que funciona no IE.
Bem, inicialmente meu código tem 2 probleminhas, facilmente resolvidos:
- Ele não funciona no Firefox. Mas basta integrar minhas duas funções e tudo se resolve.
- Ele é completamente “inacessível”. A acessibilidade foi por água abaixo. Mas existem técnicas para desfazer isso. Não coloquei aqui, pois meu objetivo é ensinar o botão voltar.
Ambos problemas podem ser resolvidos. E não é difícil. Para resolve-los, pretendo escrever mais um código. Vou avisando que vai ser grande, mas melhor que os dois que já criei. Se você aceita as condições supra citadas, proponho: continuemos…
O conceito utilizado é simplesmente o mesmo: comparar o hash com o local da página, que estará em uma variável, que será definida através de uma função. A técnica que é um pouco diferente: em vez de apenas hashes, utilizaremos iframes, que ativam o botão voltar no IE.
Passos Básicos
Para utilizarmos essa técnica, estou usando um XHTML normal. Por razões de acessibilidade (um pouco, né), estou usando também a função “addEvent()”, para manipular o evento “window.onload”. Vamos lá:
<html>
<head>
<title>Botão Voltar no IE</title>
<script>
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
</script>
</head>
<body>
<div id="container"> </div>
<ul>
<li><a href="javascript:document.getElementById('ajaxnav').setAttribute('src', 'mock-page.php?hash=1');">Page 1</a></li>
<li><a href="javascript:document.getElementById('ajaxnav').setAttribute('src', 'mock-page.php?hash=2');">Page 2</a></li>
<li><a href="javascript:document.getElementById('ajaxnav').setAttribute('src', 'mock-page.php?hash=3');">Page 3</a></li>
</ul>
</body>
</html>Observe o motivo da inacessibilidade: os links. Por que eles apontam para um objeto? Calma… Esse objeto, por dedução, é um iframe. Mas onde ele está? Temos que criar ele via JavaScript (não tentei criar direto, acho que é assim pra “enganar” o validador). Antes do fechamento do corpo da página, insira:
<script>
var windowlocator = window.location.hash.split("#")[1] || "1";
document.write("<iframe id='ajaxnav' name='ajaxnav' src='mock-page.php?hash="+windowlocator+"' style='display: none;'></iframe>");
</script>E aí está. Aliás, não está, ele é invisível(sério???)! E ele aponta para uma página “mock-page.php”. Essa foi pura e simplesmente copiada do Mike. Mais tarde veremos ela.
O Script
Agora sim, o temido script.
var locator; // Variável c/ local da pagina
function iFrameFix() {
locator = document.frames['ajaxnav'].getLocation().split("?hash=")[1] || "1"; // A mesma variavel
// Note que ela tem um valor "1" caso nada seja definido
setTimeout("checkBookmark()",100); // Função para checar Bookmark ou Refresh
}Sinceramente, não sei porque um timeout ali em cima. Aqui funcionou direitinho sem ele.
Observe com atenção, caro aprendiz: tem uma função getLocation ali. Ela pegará o hash da página “mock-page.php”. Curioso? Dentro de uma página comum, temos um script:
<script type="text/javascript">
function getLocation() {
return '<?php print "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['PHP_SELF'] . "?" . $_SERVER['QUERY_STRING'] ?>';
}
</script>Aquela função retorna um valor passado pelo PHP. Não convém ficar explicando PHP agora, até porque eu não sou muito bom nisso. Agora vamos a mais uma função:
function checkBookmark() {
window.location.hash = locator || "1"; // Local do Hash
checkWhetherChanged(0); // Checar mudanças
}
function checkWhetherChanged(location) {
var locator = document.frames['ajaxnav'].getLocation().split("?hash=")[1] || "1"; // De novo, para não ter problemas
if(locator != location) { // Se página != hash...
doGetPage(locator); // Requisição Ajax
window.location.hash = locator; // E mudamos o hash da página
}
setTimeout("checkWhetherChanged(" + locator + ")", 200); // Pequeno intervalo de tempo, e repetimos tudo, infinitamente
}Acho que o código é familiar. O importante é saber fazer a requisição Ajax. Não vou explicar ela aqui, você vai ter que sofrer e cria-la sozinho. Para isso, faça uma query string ” “valor=” + locator”, algo assim.
Tá legal, tá tudo definido bonitinho, mas e quando começa tudo? Quando a página carregar, e temos que definir isso também.
addEvent(window, "load", iFrameFix);Bem, acho que acabou… Como o pessoal disse que eu confundi muito no outro artigo, vou explicar o “fluxo do script”.
[página carregada] Executamos "iFrameFix()";
[iFrameFix()] Definimos "locator" como sendo o hash do iframe;
Executamos "checkBookmark()";
[checkBookmark()] Definimos o hash da página como sendo igual a "locator" ou "1";
Executamos "checkWhetherChanged(0)", com parâmetro 0;
[checkWhetherChanged()] Pegamos "locator" de novo (para que sejam verificadas as modificações);
Se "locator" for diferente de "location", fazemos uma requisição Ajax;
E definimos "window.location" com um hash "locator";
A cada 200 milissegundos, executamos essa função de novo;
E em breve estarei colocando aqui o código completo, unindo as duas soluções, e de forma mais “acessível” também.
Depois de alguns aprimoramentos, essa técnica se tornou muito melhor. Como esse post está desatualizado, considere ler sua continuação: Histórico para Navegação via JavaScript.
Opa. Estaremos aguardando a união das duas técnicas :)
Aew fih, num existe nenhuma função para ativar o Botão Voltar para IE sem utizar iFrames naum?
Não gosto de usar iFrames
Me responde por e-mail, se possível
Eu estou testando este formulario. Pois, fiz um no meu site e eu não consegui fazê-lo retornar a página anterior.