JulioGreff.net » histórico

Histórico para Navegação via JavaScript

Julio Greff — Tue, 05 Jun 2007 23:03:34 +0000

Já foram criadas muitas soluções para consertar o histórico quando fazemos a navegação via JavaScript (o maior problema com Ajax): a do Cau Guanabara, a minha, a do Bermonruf, além de outras derivações juntando pedaços das três. Agora eu volto aqui não para criar uma função nova, mas sim explicar os passos para você criar a sua própria função, atendendo às suas próprias necessidades.

Vamos resolver o problema por partes, na seguinte ordem:

Bookmarking
Histórico
Correções para o IE
Aperfeiçoamentos
Código Completo e Uso

Vale lembrar também que estou escrevendo códigos para cuidar do histórico para JavaScript, e não só Ajax (aliás, todas as soluções anteriores faziam isso, mas pouca gente se tocou).

Código Base

Usaremos a seguinte página-base para testarmos nosso script:



BackButton Fixes

Como testaremos a navegação somente com JavaScript, não precisaremos fazer qualquer requisição Ajax. Portanto, não precisaremos de uma função para tal.

Bookmarking

Como na navegação via JavaScript não mudamos a URL, não podemos fazer bookmarking, já que a aplicação, sempre que acessada, estará no estado inicial. A única maneira de permitir o bookmarking seria mudando a URL.

Como sempre estaremos na mesma página, acrescentaremos apenas um fragmento após o nome do arquivo. Poderíamos optar pelas query strings (file.ext?param=value), mas elas atualizariam a página quando fossem mudadas. Então optaremos pelos hashes (file.ext#hash), que não atualizam a página e podem ser mudados à vontade.

Primeiramente, quando a página é carregada, precisamos verificar se houve bookmarking:

function initialize() {
  var browserHash = window.location.hash.substring(1); // Hash da barra de navegação
  browserHash = (!browserHash) ? 0 : browserHash; // Hash padrão
  $("select").selectedIndex = browserHash;
}

Não se esqueça de modificar a tag body para (nos preocuparemos com obstrusão depois), e de criar a função $() para pegar elementos pela ID.

Se especificarmos um hash “1″ ou “2″, nosso select mudará quando atualizarmos a página, ele não mudará automaticamente. Mas já temos nosso bookmarking inicial.

Por enquanto, quando mudamos nosso select, a URL não muda. Isso significa que nosso usuário terá que adivinhar qual hash deverá usar, o que não é bom. Precisamos de uma função que mude o hash do navegador quando mudarmos as opções do select:

function makeBookmark() {
  window.location.hash = "#" + $("select").selectedIndex; // Muda o hash da página
}

E também devemos modificar nosso select para .

Note que temos alguns problemas: quando no estado inicial, não temos diferença entre appHash e o hash do browser, fazendo com que nada aconteça (causa problemas com o uso de Ajax), e ainda não temos o funcionamento desejado nem no IE nem no Opera.

Correções para o IE

O IE sempre foi do contra, e ele não abriu excessão para nossa técnica anterior. Quando trocamos o hash da página, o IE não ativa o histórico, e não há maneira de contornar isso sem a gambiarra. Essa gambiarra seria o uso de um iframe escondido, do qual falaremos daqui a pouco.

Como você já deve ter entendido o espírito da coisa, vou postar o código inteiro, e vou explicando as linhas que forem necessárias, até porque alguém pode ter se perdido.

var appHash = "";
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") > -1) ? true : false;
function $(id) { return document.getElementById(id); }
function makeHistory(newHash) {
  if(isIe === true)
    $("control-iframe").setAttribute("src", "control.htm?id=" + newHash);
  window.location.hash = "#" + newHash;
  appHash = newHash;
}
function handleHistory() {
  var browserHash = (hash = window.location.hash) ? hash : "#" + 1;
  if(browserHash != appHash) {
    appHash = browserHash;
    $("select").selectedIndex = browserHash.substring(1);
  }
}
function createIFrame() {
  var iFrame = document.createElement("iframe");
  iFrame.setAttribute("src", "control.htm?id=1");
  iFrame.setAttribute("id", "control-iframe");
  iFrame.style.display = "none";
  document.body.appendChild(iFrame);
}
function initialize() {
  if(isIe === true)
    createIFrame();
  handleHistory();
  window.setInterval(handleHistory, 100);
}

Vamos pela ordem. Na função initialize, criamos um iframe escondido se o browser for o IE (definido pela variável isIe, lá no começo), através da função createIFrame, sem mistério.

Na função makeHistory, trocamos a URL do iframe (se for o caso), forçando sua atualização (veremos porque mais tarde).

No iframe, temos o seguinte código:

Toda vez que o iframe é atualizado (seja pelo usuário ou pela navegação no histórico), ele muda o hash da página pai, nos permitindo fazer a verificação de estados.

Também fiz uma pequena modificação: estado inicial (caso não haja um hash) para o FF/Opera. Na parte do IE já fiz direto.

Aperfeiçoamentos

Para facilitar o uso, e por causa de alguns bugs existentes, fiz algumas modificações no código ao longo do tempo. Não irei explica-las agora, isso fica para uma outra oportunidade.

O código completo do script, corrigido e atualizado, é esse:


var appHash = "";
var appIndex = "";
var appDefault = "home";
var appFunction = function(){};
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") > -1) ? true : false;
function $(id) { return document.getElementById(id); }
function makeHistory(newHash) {
  if(isIe === true)
    $("control-iframe").setAttribute("src", "control.htm?id=" + newHash);
  else if(newHash != appIndex)
    window.location.hash = newHash;
  else
    go2index();
}
function handleHistory() {
  var browserHash = (hash = window.location.href.split("#")[1]) ? hash : "";
  if(browserHash != appHash) {
    if(browserHash != "") {
      appFunction(browserHash);
      appHash = browserHash;
      makeHistory(browserHash);
	}
	else {
	  clearInterval(checkInterval);
	  window.location.hash = appHash;
	  makeHistory(appIndex);
	}
  }
}
function createIFrame() {
  var iFrame = document.createElement("iframe");
  iFrame.setAttribute("src", "control.htm?id=" + (hash = window.location.href.split("#")[1]) ? hash : appDefault);
  iFrame.setAttribute("id", "control-iframe");
  iFrame.style.display = "none";
  document.body.appendChild(iFrame);
}
function initialize() {
  if(isIe === true)
    createIFrame();
  checkBookmark();
  checkInterval = setInterval(handleHistory, 100);
}
function checkBookmark() {
  var browserHash = (hash = window.location.href.split("#")[1]) ? hash : "";
  window.location.hash = (browserHash == "") ? appDefault : browserHash;
}
function go2index() {
  window.location = window.location.href.split("#")[0] + "#";
  window.location.reload();
}
function goTo(strUrl) {
	window.location.hash = strUrl;
	appFunction(strUrl);
}

E o código do iframe control.htm é:

Pra usar a função, você faz sua página normalmente. Você precisará criar um arquivo com todo o script acima, e inclui-lo em sua página. Você também precisará criar o arquivo control.htm, o nosso iframe.

No script, você poderá mudar as variáveis appDefault (hash inicial), appIndex (hash que deve atualizar a página) e appFunction (função que faz a navegação). Para executar sua função de navegação, chame a função makeHistory, passando a query string como parâmetro.

Simples, não? Não, mas é fácil de usar. Dúvidas, bugs, sugestões, qualquer coisa que possa ajudar, é só comentar!

Créditos

Não criei tudo isso do nada, me baseei em algumas idéias já existentes. As principais foram de Mike Stenhouse (idéia original), Bernardo Rufino (aperfeiçoamentos), Dekassegui (correções e personalizaçãoes), e um pouco da minha idéia quase-original também (que não me lembro o nome do sujeito que tinha postado um rascunho em um fórum por aí).

Posts Relacionados

Back Button Improved!

Julio Greff — Sat, 18 Nov 2006 15:05:17 +0000

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.

Desde minha última postagem, muita coisa aconteceu… O portal Ajax Online foi hackeado (juro que não fui eu) e está fora do ar, tive a oportunidade de conhecer o IE7 (realmente estou atrasado nesse ponto), fui convidado para ser colunista do yourDevelop, e mais outras coisinhas.

Como prometi, estou postando a versão cross-browser e acessível do meu script que faz o botão voltar funcionar. Na verdade, esse script é mais uma cópia do Mike Stenhouse, mas simplifiquei muita coisa, e melhorei um pouco no que foi possível. Alguns problemas ainda persistem no IE, mas são um tanto incomuns. Não vou explicar o código, só a parte lógica, pois os códigos já foram explicados anteriormente.

Diferente do Cau Guanabara, resolvi os problemas de refresh, bookmark e histórico (voltar e avançar) em um único script, funcionando em Firefox e IE. Tive a paciência de ler todo o script do Mike Stenhouse e entender todo ele, e criar um novo, simplificando alguns aspectos.

A lógica do Voltar-Avançar continua sempre a mesma. Manipulamos o botão através dos hashes (e iframes também, no caso do IE), que ativam o botão voltar. Neste caso, comparamos o hash da página com o local que está carregado dentro da página. Por exemplo: na barra de endereços, temos “http://localhost/index.htm#page1″, mas na página está carregado o conteúdo pertencente ao hash “page2″. Assim, quando a função “checkChanges” for executada novamente, ela vai sincronizar o hash com o conteúdo.

A parte do refresh e bookmarking é extremamente fácil. Quando a página é carregada, a função “checkChanges” (ou “checkBookmark”, no IE) é chamada, e apenas sincroniza o conteúdo com o hash inicial, sem mais enrolações.

Modificações

Em relação ao script original, modifiquei umas coisinhas. Uma delas foi a maneira como o iframe é criado. Em vez de “document.write”, usei DOM. Simples, qualquer um fazia.

As outras modificações, um pouco mais complicadas, se referem todas aos objetos urlFix e iFrameFix. Usei JSON em vez dos objetos como funções. Isso evita aquele “new”. Ahh! Também não usei o PageLocator.makeNewLocation. Usei window.location.hash, que faz a mesma coisa e ocupa menos código.

Usando no seu site

Em um comentário, perguntaram-me como proceder para utilizar o script em uma página. Acabei não explicando na hora porque ficaria muito difícil. Agora ficou fácil (nunca leram isso no Banco Postal???). Vamos lá, então.

Insira tudo que estiver entre as tags no seu site, sem exceções. E insira os links normalmente também, apontando para a página que deveria ser carregada sem o uso de Ajax. Lembre-se da query string “hash=”. Dentro daquilo deve estar todas as query strings que sejam necessárias (eu sei, é difícil usar mais que uma).

O script fará quase tudo sozinho, você só precisará da função doGetPage. Ela será a responsável pelas requisições Ajax. Faça como uma função qualquer, passando o atributo hash como query string.

E o código???

~~Pensou que eu ia esquecer? Não sou tão mal assim. O código está disponível para download, zipado, aqui~~ O código acabou se perdendo no tempo e no espaço. Leia a atualização do post para algo ainda melhor! Ele ~~tem~~ tinha:

A página principal index.html
A página mock-page.php

Tudo funciona direitinho, menos doGetPage. Usei apenas para simular… Apesar de dever ser incluída, não coloquei content.php também. Por quê? Porque não faremos nada em Ajax aqui! Apenas simulando…

[update]Dica do Dekassegui, pra retirar o bloco de script suplementar lá embaixo: Subversão Parcial[/update]

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.

Posts Relacionados

Botão Voltar para IE

Julio Greff — Wed, 15 Nov 2006 20:31:07 +0000

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á:



Botão Voltar no IE



 

Page 1
Page 2
Page 3

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:

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:

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.

Posts Relacionados

Ativando o Botão Voltar

Julio Greff — Fri, 20 Oct 2006 22:34:25 +0000

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.

Depois de um longo tempo de pesquisa, mais um tempinho para testes e melhoramentos, descobri um script que nos permite manipular o botão voltar. Como em Ajax a navegação é completamente por JavaScript, o botão voltar não é ativado de maneira alguma, certo? É, quase. Existe um código extremamente complicado que faz o botão ser ativado. Nem vou explica-lo, vou deixar vocês sofrerem pra descobrir:

top.location = "#hash";

Esse é equivalente a . Como sabemos, âncoras (ou hashes) ativam o botão voltar. Tudo certo, eureka, descobrimos a América, um viva para nós. Mas existe um pequeno inconveniente: quando clicamos no botão voltar, ele não ativa nenhum evento no navegador. Isso mesmo, pode procurar em todas as referências que você conhece.

E agora??? Volte ao início da teoria do JavaScript. Você lembrará de uma simples função:

setInterval("history(false)", 100);

Isso te faz pensar em algo? Uma função executada a cada 1/10 de segundo? Ou qualquer outro intervalo pequeno. É esse “artifício” (legítima gambiarra, mas necessária) que usaremos para verificar se o usuário voltou, avançou ou recarregou a página.

Agora vamos montar um pedaço de nosso script:

var local = "";
window.onLoad = setInterval("history(false)", 100);
function request( x ) {
	ajax(url + "?id=" + x); // Aqui uma função que faça a requisição Ajax
	top.location = "#" + x; // Pode ser trocado por um link com hash
	history(true); // Chama a função de histórico
}

Agora preste atenção em alguns detalhes importantes: a função history foi chamada duas vezes, com false e outra vez com true. Esse parâmetro serve para dizer a função que o usuário (se for true) chamou a função ou foi pelo intervalo (caso for false). Outro detalhe: a variável “local” é a variável que dirá a função history em qual local (na página, lembre-se disso) estamos.

Curioso? Então vamos adiante, para a outra função do nosso script: history. Apertem os cintos e vamos decolar. Se você tem estômago fraco ou é cardíaco, recomendo… continuar, não tem nada de assustador, é extremamente simples:

function history(fromUser) {
  localHash = location.hash.split("#")[1];
  if (fromUser){
    local = localHash;
  }
  else if (local != localHash){
        request(localHash);
  }
}

Agora preste atenção novamente. Lembra do “local” (eu avisei pra não esquecer…)? Agora temos outro local, “localHash”, que é o local para onde o hash aponta. O nosso hash servirá de query string, se já deu pra notar. O que está no hash vai para a outra função em determinada situação.

Se “fromUser” for true (veio do usuário), não nos preocupamos e passamos localHash direto para o nosso local. Se for via intervalo, verificamos se “local” é igual a “localHash”. Se não for, executamos uma nova requisição. E é só isso! Apenas 9 linhas de código para a nossa função de histórico! Acabamos com todas as 7 cabeças do dragão. Espero que saibam usar, já que para muitas query strings o negócio fica mais complicado. Bom proveito!

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.