This entry was posted on 0, 24 de novembro de 2006 at 11:11 pm and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
75 Responses to Solução simples para o Botão Voltar do Ajax, Cross Browser
É, esse botão voltar está dando o que falar… O pessoal tá bem louco atrás da melhor solução. Gostei da sua idéia, não tinha pensado nisso. Como diz o Dekassegui, passamos a bola adiante mais uma vez. Vou dar uma analisada, e aí a gente vê se melhora,se é que é possível… Um colaborando com o outro, e mais passos em frente!!! Valeu aí, Bernardo!
Muito bom..
é bom ver a comunidade reunida buscando uma solução para um determinado problema..
Parece que vocês estão no caminho certo.
Parabéns a vc, ao Júlio e ao Cau.
“[…] Porém agora, após uma longa briga travada por 3 paladinos do ajax (Bernardo Rufino, Julio Greff e Cau Guanabara), parece que finalmente está saindo uma solução definitiva: Solução simples para o Botão Voltar do Ajax, Cross Browser. […]” AJAX – botão voltar: A solução >> El Micox
(Ops para o anterior)
Olá Amigo!!!, Fiz e refiz e não consegui implementar no meu site… nele eu tenho a seguinte situação… um botão pesquisar q lista em um grid meus dados… escolho um dado e clico para ir para uma outra pagina.. apartir nesta outra pagina implementei o codio… ele volta mas o grid não aparece na posição q estava!!! o que posso estar fazendo de errado?
Rangel,
Desculpe a demora, o problema era realmente um bug, já foi corrigido, peço que pegue o código de novo. Desculpe o incomodo, e valeu por alertar!
Estado Inicial da Página Corrigido!
É, estou brigando mais um pouco com o IE aqui em casa, e estou criando (copiando, modificando) uma outra solução, utilizando os mesmos princípios, mas com JSON, para facilitar a implementação. Em breve… Valeu aí, Bernardo!
Olá, estou usando e tentando entender todo o codigo que voces criaram, tipo eu queria fazer com que a pagina index abrisse direto ja puxando um link, tentei colocar “onLoad(“ajax(‘home.htm’); return false;” dentro da tag body da pagina inicial para puxar esse arquivo ja no onload mas nao deu certo. existe alguma forma de fazer isso com esse codigo? vlw Bernardo…
Bernardo…. pelo que eu vi, sua solução é exatamente oq eu to precisando… habilita botão voltar, tudo… e eu posso usar links… tipo index.php por exemplo. O do Julio, se eu tento usar um hash tipo, ‘conteudo’, ele da erro.
Cara, mas os arquivos do codigo.. tao fora, nao consigo baixar. queria estudar esse codigo seu…. ta de parabens mesmo cara!
Teria como vc disponibilizar os arquivos do codigo pra gente novamente? ou se der pra me enviar no e-mail geraldoabreu@gmail.com
Pablo Davi,
É, na tag body num dá, porque olha só, todos os objetos só serão iniciados quando a janela ser carregada(window.onload), então como o body carrega antes é necessário colocar junto do window e não no body, é só colocar no final “ajax(‘home.htm’);” como você quiser, fica mais ou menos assim:
window.onload=function(){criaElementos(); verificaInt=setInterval(“verifica()”, 100); ajax(‘home.htm’);} Geraldo,
O Servidor devia estar fora, já está online se quiser ver os códigos tente ir aqui. Mas de qualquer jeito já te enviei um email com os dois arquivos ajaxBack.js e o control.htm.
Caro Bernardo… Novamente, meus parabéns pelo script, rs.
Olha… vi aqui algo que poderia ser melhorado no script….
Quando você clica em um link, a pessoa escuta 4 sons de clique… Principalmente quando o site está local, e os sons de clique são mais pertos, fica um pouco desconfortavel…
Isso, é claro, como sempre, no IE, pelo menos no 6.
Teria como mudar isso? Posso estar sendo meio louko, rs… pode ser uma coisa absurda que não tem como, mas diz aê pra gente! Abraços!
Agora queria saber como faço para implementar quando todos os links que tenho são para chamar uma função ajax que acessar uma unica pagina php que tem todas as funções e retorna o conteudo, pelo o semplo que vi, teria que ter as paginas php para funcionar…
Geraldo,
Ehh, mas aqui eu ouço 2 cliques, é chato de conseguir mudar pois um clique é quando muda o iFrame e outro é quando muda o Hash… To estudando outro metodo mais simples.
Valew!
Davi,
Vc tá falando que quer chamar uma função especificamente em uma página cheia de funções?
Se for faz com GET, vc envia qual função vc quer e faz o php retornar o resultado de acordo com o parametro…
Chato demais eu, mas lá vai mais uma, rs. Como eu coloco pra abrir automático? É coisa boba… mas tô apanhando… Tipo assim, quando abrir a página, já aparecer a home entendeu.
Opa.. perfeito! Não tinha visto… Obrigado pela paciência, rs.
Tô aqui tentando fazer um esquema para, caso o cara digite um endereço direto, tipo… home.php, ele detecte isso, e recarregue a página no formato que o seu script reconhece… para que assim, a página seja aberta do jeito certo.
E Bernardo, vi que vc não colocou créditos no script… Sugiro que você coloque, assim você se tornará mais conhecido…
Bernardo… no negócio que te falei acima… tentei fazer isso:
Mas não rola… Eu entro vamos supor, em localhost/ajax/teste2.php e sou redirecionado para localhost/ajax/#[page]teste2.php . Aí a página é aberta corretamente. Só que em seguida, ela é recarregada… O script está sendo executado duas vezes, sei lá…
Existiria alguma forma de fazer isso em javascript?
É mais ou menos a mesma coisa que vc faz por exemplo, quando eu digito a página principal, e aí já abre a home por exemplo…. Só q não consegui adaptar… pode dar um Help?
Bom, só pra consta, consegui fazer algo… usando javascript:
function verificaURL()
{
var url = location.href;
var newurl = “”;
if(!(url.indexOf(‘#[page]’) > -1))
{
var ar = url.split(‘/’);
for(i = 0; i
Colocado em alguma página, tipo no exemplo q eu falei, teste2.php, caso essa página seja acessada diretamente, automaticamente o navegador é redirecionado para a página no formato correto, para que abra dentro do Ajax, usando o script do Bernado.
Geraldo,
Desculpe pela demora da resposta, tava analisando o que disse e não consegui entender bem, você diz que quando você entra numa página que inicialmente é estática e não tem requisição feita ao abrir, ele recarrega ela? Estranho, não consegui reproduzir, você não está passando nenhum Hash para ela?
To analisando um método mais simples..
Flwss e obrigado por usar o script! hehe
Tipo assim, eu tenho a página teste2.php . Se eu acesso ela diretamente… digitando localhost/ajax/teste2.php no navegador, ela abre fora do ajax… certo? Já que não passei hash nenhum….
Esse script que eu consegui fazer… se vc colocar ele nessa página teste2.php, e tentar acessar ela diretamente, o script detecta isso, e manda a pessoa para o endereço localhost/ajax/#[page]teste2.php , ou seja, o endereço da página acessada, mas passando hash… Aí seu script reconhece, e abre dentro do ajax… Entendeu?
Tá bem pequeno o script… acho que rola legal…. acima ele cortou. Segue abaixo o completo:
function verificaURL()
{
// Define variável que contém a url completa da página
var url = location.href;
// Define variável que irá conter a nova url
var newurl = “”;
if(!(url.indexOf(‘#[page]’) > -1))
{
var ar = url.split(‘/’);
Ok, recebido…
Agora entendi, muito boa idéia! Vou ver o que posso faer para ver se é possivel integrar. Pois talve algumas pessoas não consigam mapear quais URLs são para serem abertas pelo Ajax ou não. Enfim, muito boa idéia Parabééééns!
Estou usando a solução para o botão voltar desenvolvida pelo Bernardo Rufino. Tudo funciona bem em links que não tenham âncoras, mas ao posicionar a âncora ela desabilita o botão voltar o qual deixa de funcionar.
Após esse location o Botão Voltar pára de funcionar normalmente, não chama mais os arquivos do histórico – só continua mostrando o histórico.
Entretanto, se eu chamar outra página que não tenha âncoras, ele volta a funcionar.
O problema é somente quando o link tem âncoras.
Alguém tem alguma idéia de como resolver?
Obs.: para chamar âncoras em Ajax utilizo a seguinte lógica:
Conforme código, abaixo, após o carregamento e o innerHtml – coloco o document.location.href = ancora.
Pronto, o documento carregado por Ajax é posicionado no lugar desejado.
if (xmlhttp.status==200)
{
respostaServicoSolicitado=xmlhttp.responseText;
//Exibe a resposta do servidor no local desejado
document.getElementById(idDestino).innerHTML=respostaServicoSolicitado;
if (ancora!=”)
{
document.location.href = ancora;
}
}
Entretanto, como o ‘document.location.href =ancora’, está causando esse problema,
estou procurando outro comando que me faça posicionar no local desejado através do id ou name do elemento.
Nesse caso, já tentei o seguinte:
var anc = document.getElementsByName(ancora);
anc.focus(); //não funcionou.
Estou apelando (hehehehe), mas a idéia era dar foco ao objeto cujo id ou name está na variável ancora.
Alguém conhece algum comando que produza o resultado que estou procurando e que não seja o ‘document.location.href’.
Ou, se o for, como resolver esse problema da desabilitação do Botão Voltar?
[…] as visitas e os leitores de feed, tem muitas visitas pra 2 posts em especial, são eles: o botão voltar do ajax e como zerar a contagem do rapidshare e afins, esses então vem copia cola e vai. Fica dificil […]
Estou iniciando neste assunto…ajax! Gostaria de saber se o código disponibilizado para utilizar no botão voltar é possível ser utilizado quando se carrega um arquivo .html em div. Pelo que vi você cria iframes…Não sei como utilizar…gostaria de obter apenas o código do botão voltar. É possível?
Carlos,
Acho que será dificil pois o Google Analytics se não me engano detecta as características da página via Js, então seriam as mesmas da página com os links pras chamadas ao invés de cada página chamada ser diferente. Glenda,
É para isso mesmo, solucionar o botão voltar em requisições Ajax, você fixa uma requisição padrão em um elemento, e só muda a url que será exibida, essa solução que fiz não inclui suporte a Ajax.
Bernardo,
Antes de mais nada parabéns pelo código, excelente, me foi muito útil!!!!
Estou desenvolvendo um site em HTML com menu em flash, e para evitar o reflash estou utilizando o código do MICOX em conjunto com o seu. No Mozilla e no Netscape ele está funcionando 100%, mas quando no internet explorer 7 a página não carrega. O que poderia estar ocorrendo já que estou utilizando seu código conforme a instrução de vocês nos foruns??? No botão flash para carregar a página estou utilizando por exemplo:
on (release) {
getURL(“javascript:ajax(‘home.html’)”, “_self”);
}
[…] 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 […]
Sou um pouco novo em ajax, e por isso não estou conseguindo colocar os códigos na pagina, index.php, q no meu caso é onde recebera o conteudo atravez do ajax nos div’s, eu estou desenvolvendo um sistema em php com xajax e gostaria q quando pressionasse a tecla F5 ou clicasse no botao voltar, q a pagina nao voltasse à index inicial, se vc, ou alguem puder me ajudar…
Olá amigo, parabens pelo código.
Não consegui utilizá-lo em testes que fiz aqui, utilizo uma função para carregar o ajax, exemplo:
ajaxCarrega(“id_destino”, “arquivo.php”), como citado anteriormente.
Ela já tem várias chamadas no sistema todo, gostaria de saber senão tem como adicionar uma chamada para a sua função dentro desta função que já está implementada e funcionando.
Algo como salvaHistorico(); dentro desta ajaxCarrega();
Algo mais genérico iria ajudar muita gente por aqui.
Parabéns, muito útil!!
Porém estou com um problema igual ao do jaisoN.
Tentei fazer essa solução que vc falou de renomear a antiga e na nova chamar
Mas ele entra num loop infinito e fica gerando este erro:
Erro: uncaught exception: [Exception… “Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]” nsresult: “0x80070057 (NS_ERROR_ILLEGAL_VALUE)” location: “JS frame :: http://pop-sc.rnp.br/js/ajax.js :: anonymous :: line 136″ data: no]
Tentei tbm ao invés de renomear, eu pegar o que o código dentro da função e colocar nessa nova, mas tbm não deu!
function ajax_loadContent(divId,url) {
/*Código para instanciação do objeto da classe ajax.js
que define a mensagem enquanto está carregando,
o ID de onde carregar, o arquivo, etc. */
}
O que eu fiz então foi renomear essa função, e chamar ela nesta:
Jonatan
A função que servirá de callback só aceita um parametro que será uma string transportada entre cada chamada ao Hash ou iFrame. O ideal para esses tipos de requisição é escolher um elemento que você deseja e consertar o histórico somente com as chamadas Ajax para esse elemento, ou então terá que fazer tratamento de String.
Bom, acabei trocando as chamadas no sistema todo (do onclick para o href) e deu certo!
Porém, pra variar, surgiu outro problema: (¬¬) No IE não tá funcionando! (Testei apenas na versão 6 ainda).
Ele não chega a gerar erro, mas simplesmente fica carregando carregando carregando…
To saindo do trampo agora, mas amanhã vou verificar o que pode estar acontecendo, mas se alguém já teve esse problema e sabe como resolver, ficaria mto grato! =P
O site que to desenvolvendo é este: http://www.pop-sc.rnp.br
Consegui resolver esse último problema apenas trocando a ordem da chamada/importação dos scripts na página! oO
Mas é claro que agora to com outro problema né? Hehe.. Sou mto azarado mesmo!
O erro dessa vez é o Refresh no FF que não tá funcionado! =/
Coloquei no meu site, mas vive dando pau no Atualizar (principalmente no Firefox.. tem vezes que funciona e outras que não.. =/)
E parece que ele guarda as páginas em cache, e isso dá problema quando vc precisa que a página precise ser recarregada, no meu caso é assim:
Eu tenho uma página que quando o usuário tá logado, exibe uma tabela e um formulário para alteração dos dados desta tabela, e quando não está logado, exibe apenas alguns dados da tabela.
Acontece então que quando eu entro nesta página logada, ele exibe certinho, aí eu deslogo e entro novamente, e ele mistura as informações exibidas (da página qdo tá logado e não)
Quem sabe na próxima versão vcs consigam resolver esse probleminha, mas de resto estão de parabéns! Muito boa a iniciativa!
oi. Muito boa sua solução. Tenho so um problema.
Tentei utilizá-la em um site, onde são carregados muitos conteúdos no início.
Bom, no firefox, funciona perfeitamente, mas no IE, se clicarmos nos links, ele interrompe e dá um erro, dizendo que o “iframe” é um objeto nulo. E esse erro só acontece se não esperarmos todo conteúdo do site carregar. Há algum modo de evitar isso? Ou teria de fazer um preload de todo conteúdo?
Obrigado
Apliquei seu codigo junto com um ajax simplinho que tenho aqui e deu tudo certo no ie7 e FF2.0, porém no ie6 nao.
Estou usando flash como menu. Se quiser dar uma olhada no projeto que estou desenvolvendo com a sua solução acesse http://www.webgreat.com.br/lasetronik
document.navigators = {
settings: {
interval: 100, //The interval which the verification for new data will be done (in miliseconds)
helper: true, //Specify if the onnavigate function will return the helper, do not change!
iframe_src: “control.htm” //The location of the file control.htm, absolute path please
},
initialize: function(){
this.is_ie = (navigator.userAgent.toLowerCase().indexOf(“msie”) > -1) ? true : false;
if(this.is_ie){
this.settings.iframe_src = this.settings.iframe_src.replace(/(\?|#).*$/, “”);
window.attachEvent(“onload”, (function(){
//this.running = true; The iFrame that needs to make it running
this.iframe = document.createElement(“iframe”);
this.iframe.setAttribute(“src”, this.settings.iframe_src);
this.iframe.style.display = “none”;
document.getElementsByTagName(“body”)[0].appendChild(this.iframe);
}).bind(this));
} else {this.running = true;}
},
//The function that is called by the user and puts new data in the hash to be called
helper: function(data, force){
var navs = document.navigators; var data = “[” + this.id + “]” + data;
if(force){navs.data_buffer = “”;} //If force is true then calling sequentially the same helper works
if(navs.is_ie){navs.iframe.src = navs.settings.iframe_src + “?id=” + data;}
else{window.location.hash = “#” + data;}
},
called: false,
history: [],
data_buffer: “”
};
function onnavigate(id, callback){
var navs = document.navigators; navs[id] = {};
if(!navs.running){navs.initialize();}
setInterval(function(){if(navs.running){
var url = window.location.href;
var hash = window.location.hash.replace(/#/, “”);
var theid = “#[” + id + “]”;
if(url.indexOf(theid) > -1){ //If the call is with us!
var data = url.split(theid)[1] || “”;
var new_data = theid + data;
if(navs.data_buffer != new_data){ //If the old content is diferent
callback(data); //Calling the callback function!
navs.called = true; //To make sure was already called to fix the index state
navs.history.push(new_data);
navs.data_buffer = new_data;
}
} else if (!hash && navs.called){ //If the navigators was called and the page is in index state (no hashes), it means reload!
navs.running = false; //To stop the others Intervals to dont make it the same way and broke something
window.location = ((url.indexOf(“#”) > -1) ? url.split(“#”)[0] : url) + “#”;
window.location.reload();
}
}}, navs.settings.interval);
//CÓDIGO ALTERADO, PARA SER USADO JUNTO COM O PROTOTYPE começa aqui
navs[id].merge = function(object){
for(attr in object){
this[attr] = object[attr];
}
}
//CÓDIGO ALTERADO , PARA SER USADO JUNTO COM O PROTOTYPE termina aqui
olá estou começando a utilizar seus scripts, e ocorreu um problema no internet explorer 6 e com flash, quando se coloca o flash para chamar a função request_source. Se você clicar várias vezes no botão ele abre a url que está no getURL por cima do site.
Respondendo a alguns que tiveram problemas com menus em flash e a navegação ajax… Eu vinha tendo esse problema a muito muito tempo… como não havia nenhuma solução eu fazia uma verificação dos browsers para que apenas o IE6 pulasse a navegação… ou seja, no IE6 nao funcionava a navegaçao com o botao voltar e os links pois dava erro usando menu em Flash
Depois de tanto pensar e 5 sites com a mesma implementação consegui a solução… basta usar a função ExternalInterface do flash no lugar da getUrl… qualquer duvida entra em contato comigo atraves do contato do meu website.. http://www.joaofelipe.net
Caros! ouvi muito falar desse componente, e gostaria de tirar uma dúvida.
No meu site eu tenho uma pesquisa de hotéis, e nessa página eu tenho uma função navegar(npg) que chama uma função ajax passando uma série de outros parámetros. Gostaria que me desse uma luz de como chamo a função navegar(npg) utilizando o componente do Bernardo.
se puder dar uma olhada: http://www.falaturista.com.br/pesquisarhoteis.php?filtro=&cmbcidade1=2615648 fico muito grato.
eu tenho um site que eu faço a chamada do ajax em varias div’s (tenho uma principal, mas tenho outras q eu chamo para facilitar para o usuario na hora de cadastrar um novo cliente, por exemplo).
mas no código q vcs criaram ele sempre procura por uma div só… como eu poderia fazer para chamar essa função somente qdo eu chamar pela div principal?
nao sei se me expliquei bem, mas qq coisa eu posso exemplificar.
Ola Bernado Rufino, muito boa a sua solução, so que ainda estou tendo alguns bugs no IE7, não esta salvando o historico corretamente, ja no firefox funciona tudo ok, sera que pq estou usando a versao 0.8? acima vi os releases das versoes 1.0, 1.1, 1.2, 1.3 como faço pra baixar essas versoes mais recente?
Just went through your pages. There are very few things like my adaptable silver I have a nice joke for you) What is always behind time? (besides myself) The back of a watch.
[…] 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 […]
Só ressaltando, a solução do Guilherme Camargo Cardoso para a Prototype também serve para a JQuery e Mootools, testei todas as duas no meu site… Valeu Guilherme! Salvou minha pele!
Bernardo Rufino 
É, esse botão voltar está dando o que falar… O pessoal tá bem louco atrás da melhor solução. Gostei da sua idéia, não tinha pensado nisso. Como diz o Dekassegui, passamos a bola adiante mais uma vez. Vou dar uma analisada, e aí a gente vê se melhora,se é que é possível… Um colaborando com o outro, e mais passos em frente!!! Valeu aí, Bernardo!
Então Julio, eh assim que vai pra frente, já tem 3 colaboradores :D… hauha
Flwss
Muito bom..
é bom ver a comunidade reunida buscando uma solução para um determinado problema..
Parece que vocês estão no caminho certo.
Parabéns a vc, ao Júlio e ao Cau.
posta o codigo completo do teste ai pra gente
Thiago, coloquei no ar uma página com os códigos, vai lá.
E escrevi também no post como implementar.
“[…] Porém agora, após uma longa briga travada por 3 paladinos do ajax (Bernardo Rufino, Julio Greff e Cau Guanabara), parece que finalmente está saindo uma solução definitiva: Solução simples para o Botão Voltar do Ajax, Cross Browser. […]”
AJAX – botão voltar: A solução >> El Micox
(Ops para o anterior)
Consertei.. Vlw Micox
Olá Amigo!!!, Fiz e refiz e não consegui implementar no meu site… nele eu tenho a seguinte situação… um botão pesquisar q lista em um grid meus dados… escolho um dado e clico para ir para uma outra pagina.. apartir nesta outra pagina implementei o codio… ele volta mas o grid não aparece na posição q estava!!! o que posso estar fazendo de errado?
Rangel,
Desculpe a demora, o problema era realmente um bug, já foi corrigido, peço que pegue o código de novo. Desculpe o incomodo, e valeu por alertar!
Estado Inicial da Página Corrigido!
É, estou brigando mais um pouco com o IE aqui em casa, e estou criando (copiando, modificando) uma outra solução, utilizando os mesmos princípios, mas com JSON, para facilitar a implementação. Em breve… Valeu aí, Bernardo!
É isso aeww! Não senti a necessidade de criar baseado em objetos, 2 funções já resolveram, mas vai com tudo, esperamos novidades! Flwss
Olá, estou usando e tentando entender todo o codigo que voces criaram, tipo eu queria fazer com que a pagina index abrisse direto ja puxando um link, tentei colocar “onLoad(“ajax(‘home.htm’); return false;” dentro da tag body da pagina inicial para puxar esse arquivo ja no onload mas nao deu certo. existe alguma forma de fazer isso com esse codigo? vlw Bernardo…
Bernardo…. pelo que eu vi, sua solução é exatamente oq eu to precisando… habilita botão voltar, tudo… e eu posso usar links… tipo index.php por exemplo. O do Julio, se eu tento usar um hash tipo, ‘conteudo’, ele da erro.
Cara, mas os arquivos do codigo.. tao fora, nao consigo baixar. queria estudar esse codigo seu…. ta de parabens mesmo cara!
Teria como vc disponibilizar os arquivos do codigo pra gente novamente? ou se der pra me enviar no e-mail geraldoabreu@gmail.com
Agradeço desde já cara!
Pablo Davi,
É, na tag body num dá, porque olha só, todos os objetos só serão iniciados quando a janela ser carregada(window.onload), então como o body carrega antes é necessário colocar junto do window e não no body, é só colocar no final “ajax(‘home.htm’);” como você quiser, fica mais ou menos assim:
window.onload=function(){criaElementos(); verificaInt=setInterval(“verifica()”, 100); ajax(‘home.htm’);}
Geraldo,
O Servidor devia estar fora, já está online se quiser ver os códigos tente ir aqui. Mas de qualquer jeito já te enviei um email com os dois arquivos ajaxBack.js e o control.htm.
[…] Ver Mais […]
Galera, comenta! Ainda to ativo! Qualquer coisa é só falar que respondo, ok?
preciso de uma explicação de como usar esse negócio, pq assim eu não entendi
Bernardo… cara gostei, vlw pela solução… já tinha lido muito sobre isso, e agora sim uma solução de verdade!!!
Marcelo Dênis,
Pode falar, estamos aí..
Marcelo Siqueira,
Opa Valeu kra, vlw mesmo!!
Caro Bernardo… Novamente, meus parabéns pelo script, rs.
Olha… vi aqui algo que poderia ser melhorado no script….
Quando você clica em um link, a pessoa escuta 4 sons de clique… Principalmente quando o site está local, e os sons de clique são mais pertos, fica um pouco desconfortavel…
Isso, é claro, como sempre, no IE, pelo menos no 6.
Teria como mudar isso? Posso estar sendo meio louko, rs… pode ser uma coisa absurda que não tem como, mas diz aê pra gente! Abraços!
Cara interessante pra caramba a solução…
Agora queria saber como faço para implementar quando todos os links que tenho são para chamar uma função ajax que acessar uma unica pagina php que tem todas as funções e retorna o conteudo, pelo o semplo que vi, teria que ter as paginas php para funcionar…
Geraldo,
Ehh, mas aqui eu ouço 2 cliques, é chato de conseguir mudar pois um clique é quando muda o iFrame e outro é quando muda o Hash… To estudando outro metodo mais simples.
Valew!
Davi,
Vc tá falando que quer chamar uma função especificamente em uma página cheia de funções?
Se for faz com GET, vc envia qual função vc quer e faz o php retornar o resultado de acordo com o parametro…
Flwss
Chato demais eu, mas lá vai mais uma, rs. Como eu coloco pra abrir automático? É coisa boba… mas tô apanhando… Tipo assim, quando abrir a página, já aparecer a home entendeu.
Ahh sim, veja aqui mesmo nos comentários, respondi para o Pablo Davi
Opa.. perfeito! Não tinha visto… Obrigado pela paciência, rs.
Tô aqui tentando fazer um esquema para, caso o cara digite um endereço direto, tipo… home.php, ele detecte isso, e recarregue a página no formato que o seu script reconhece… para que assim, a página seja aberta do jeito certo.
E Bernardo, vi que vc não colocou créditos no script… Sugiro que você coloque, assim você se tornará mais conhecido…
Abraços!
Bernardo… no negócio que te falei acima… tentei fazer isso:
Mas não rola… Eu entro vamos supor, em localhost/ajax/teste2.php e sou redirecionado para localhost/ajax/#[page]teste2.php . Aí a página é aberta corretamente. Só que em seguida, ela é recarregada… O script está sendo executado duas vezes, sei lá…
Existiria alguma forma de fazer isso em javascript?
É mais ou menos a mesma coisa que vc faz por exemplo, quando eu digito a página principal, e aí já abre a home por exemplo…. Só q não consegui adaptar… pode dar um Help?
Abraços!
Bom, só pra consta, consegui fazer algo… usando javascript:
function verificaURL()
{
var url = location.href;
var newurl = “”;
if(!(url.indexOf(‘#[page]’) > -1))
{
var ar = url.split(‘/’);
for(i = 0; i
Colocado em alguma página, tipo no exemplo q eu falei, teste2.php, caso essa página seja acessada diretamente, automaticamente o navegador é redirecionado para a página no formato correto, para que abra dentro do Ajax, usando o script do Bernado.
Geraldo,
Desculpe pela demora da resposta, tava analisando o que disse e não consegui entender bem, você diz que quando você entra numa página que inicialmente é estática e não tem requisição feita ao abrir, ele recarrega ela? Estranho, não consegui reproduzir, você não está passando nenhum Hash para ela?
To analisando um método mais simples..
Flwss e obrigado por usar o script! hehe
Tipo assim, eu tenho a página teste2.php . Se eu acesso ela diretamente… digitando localhost/ajax/teste2.php no navegador, ela abre fora do ajax… certo? Já que não passei hash nenhum….
Esse script que eu consegui fazer… se vc colocar ele nessa página teste2.php, e tentar acessar ela diretamente, o script detecta isso, e manda a pessoa para o endereço localhost/ajax/#[page]teste2.php , ou seja, o endereço da página acessada, mas passando hash… Aí seu script reconhece, e abre dentro do ajax… Entendeu?
Tá bem pequeno o script… acho que rola legal…. acima ele cortou. Segue abaixo o completo:
function verificaURL()
{
// Define variável que contém a url completa da página
var url = location.href;
// Define variável que irá conter a nova url
var newurl = “”;
if(!(url.indexOf(‘#[page]’) > -1))
{
var ar = url.split(‘/’);
for(i = 0; i
Putz…. o script tá cortando. vou mandar pro seu mail, aí se vc quiser dar uma olhada para integrar com seu script….
Abraços!
Ok, recebido…
Agora entendi, muito boa idéia! Vou ver o que posso faer para ver se é possivel integrar. Pois talve algumas pessoas não consigam mapear quais URLs são para serem abertas pelo Ajax ou não. Enfim, muito boa idéia Parabééééns!
Flwss
Alguem poderia mandar para meu e-mail contato@menegaro.com uma solução para o botão voltar, obrigado.
Estou usando a solução para o botão voltar desenvolvida pelo Bernardo Rufino. Tudo funciona bem em links que não tenham âncoras, mas ao posicionar a âncora ela desabilita o botão voltar o qual deixa de funcionar.
Sendo assim, tenho o seguinte:
Tenho essa página atual (último link chamado):
http://localhost:8080/aplicacao/#pasta/Arquivo131.html
Dentro dela chamo essa (com âncora):
http://localhost:8080/aplicacao/#pasta/Arquivo112.html#12
Então, quando carregada, a página posiciona-se no item 12 e, então, temos o seguinte location:
http://localhost:8080/aplicacao/#12
Após esse location o Botão Voltar pára de funcionar normalmente, não chama mais os arquivos do histórico – só continua mostrando o histórico.
Entretanto, se eu chamar outra página que não tenha âncoras, ele volta a funcionar.
O problema é somente quando o link tem âncoras.
Alguém tem alguma idéia de como resolver?
Obs.: para chamar âncoras em Ajax utilizo a seguinte lógica:
Conforme código, abaixo, após o carregamento e o innerHtml – coloco o document.location.href = ancora.
Pronto, o documento carregado por Ajax é posicionado no lugar desejado.
if (xmlhttp.status==200)
{
respostaServicoSolicitado=xmlhttp.responseText;
//Exibe a resposta do servidor no local desejado
document.getElementById(idDestino).innerHTML=respostaServicoSolicitado;
if (ancora!=”)
{
document.location.href = ancora;
}
}
Entretanto, como o ‘document.location.href =ancora’, está causando esse problema,
estou procurando outro comando que me faça posicionar no local desejado através do id ou name do elemento.
Nesse caso, já tentei o seguinte:
var anc = document.getElementsByName(ancora);
anc.focus(); //não funcionou.
Estou apelando (hehehehe), mas a idéia era dar foco ao objeto cujo id ou name está na variável ancora.
Alguém conhece algum comando que produza o resultado que estou procurando e que não seja o ‘document.location.href’.
Ou, se o for, como resolver esse problema da desabilitação do Botão Voltar?
Vicente Domingos
Desculpem, onde se lê: document.location.href =ancora’, leia-se document.location.hash =ancora’
Vicente Domingos
[…] as visitas e os leitores de feed, tem muitas visitas pra 2 posts em especial, são eles: o botão voltar do ajax e como zerar a contagem do rapidshare e afins, esses então vem copia cola e vai. Fica dificil […]
Uma pergunta… o google analytics detecta o clique?
Pq eu queria alterar isso na minha página só por causa disso… pra ter as stats do analytics q sao importantes pra mim.
Olá, Bernardo!
Estou iniciando neste assunto…ajax! Gostaria de saber se o código disponibilizado para utilizar no botão voltar é possível ser utilizado quando se carrega um arquivo .html em div. Pelo que vi você cria iframes…Não sei como utilizar…gostaria de obter apenas o código do botão voltar. É possível?
Aguardo retorno.
Obrigada
Glenda
Carlos,
Acho que será dificil pois o Google Analytics se não me engano detecta as características da página via Js, então seriam as mesmas da página com os links pras chamadas ao invés de cada página chamada ser diferente.
Glenda,
É para isso mesmo, solucionar o botão voltar em requisições Ajax, você fixa uma requisição padrão em um elemento, e só muda a url que será exibida, essa solução que fiz não inclui suporte a Ajax.
Bernardo,
Antes de mais nada parabéns pelo código, excelente, me foi muito útil!!!!
Estou desenvolvendo um site em HTML com menu em flash, e para evitar o reflash estou utilizando o código do MICOX em conjunto com o seu. No Mozilla e no Netscape ele está funcionando 100%, mas quando no internet explorer 7 a página não carrega. O que poderia estar ocorrendo já que estou utilizando seu código conforme a instrução de vocês nos foruns??? No botão flash para carregar a página estou utilizando por exemplo:
on (release) {
getURL(“javascript:ajax(‘home.html’)”, “_self”);
}
A minha Id está
e os botões em HTML coloquei:
Home
Coloquei o site provisioriamente em:
http://www.fabiosoares.net/LWCC/
Ae grande bermon, se tiver como trocar o link do iEvolution aqui também :),
agora é ievolutionWeb.com
valeus.
[…] 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 […]
Ele não reconhece outros scripts
Como faço para carregar duas páginas em locais diferentes?
Thank you for your site.
enterprise rentacar niederheim enterprisecarrental
Olá Bernardo,
Sou um pouco novo em ajax, e por isso não estou conseguindo colocar os códigos na pagina, index.php, q no meu caso é onde recebera o conteudo atravez do ajax nos div’s, eu estou desenvolvendo um sistema em php com xajax e gostaria q quando pressionasse a tecla F5 ou clicasse no botao voltar, q a pagina nao voltasse à index inicial, se vc, ou alguem puder me ajudar…
big sausage pizza hollie
big sausage pizza hollie
Olá amigo, parabens pelo código.
Não consegui utilizá-lo em testes que fiz aqui, utilizo uma função para carregar o ajax, exemplo:
ajaxCarrega(“id_destino”, “arquivo.php”), como citado anteriormente.
Ela já tem várias chamadas no sistema todo, gostaria de saber senão tem como adicionar uma chamada para a sua função dentro desta função que já está implementada e funcionando.
Algo como salvaHistorico(); dentro desta ajaxCarrega();
Algo mais genérico iria ajudar muita gente por aqui.
Mais uma vez parabéns.
jaisoN,
Ainda não dá, mas a solução mais simples é renomear sua função antiga e redefinir a que registra o histórico com o mesmo nome da antiga.
Parabéns, muito útil!!
Porém estou com um problema igual ao do jaisoN.
Tentei fazer essa solução que vc falou de renomear a antiga e na nova chamar
Mas ele entra num loop infinito e fica gerando este erro:
Erro: uncaught exception: [Exception… “Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]” nsresult: “0x80070057 (NS_ERROR_ILLEGAL_VALUE)” location: “JS frame :: http://pop-sc.rnp.br/js/ajax.js :: anonymous :: line 136″ data: no]
Tentei tbm ao invés de renomear, eu pegar o que o código dentro da função e colocar nessa nova, mas tbm não deu!
Alguém tem alguma sugestão?
A biblioteca AJAX que eu to usando é essa:
– Simple AJAX Code-Kit (SACK) v1.6.1
– http://www.twilightuniverse.com
Só pra exemplificar o que eu tenho:
function ajax_loadContent(divId,url) {
/*Código para instanciação do objeto da classe ajax.js
que define a mensagem enquanto está carregando,
o ID de onde carregar, o arquivo, etc. */
}
O que eu fiz então foi renomear essa função, e chamar ela nesta:
ajax_loadContent = onnavigate(“ajax”, function(id_destino,arquivo_carregar) {
loadContent(id_destino,arquivo_carregar); //Função anterior renomeada
});
Teoricamente era pra funcionar, mas como eu falei ele gera aquele erro bizarro infinitas vezes obrigando a fechar a página.
Jonatan
A função que servirá de callback só aceita um parametro que será uma string transportada entre cada chamada ao Hash ou iFrame. O ideal para esses tipos de requisição é escolher um elemento que você deseja e consertar o histórico somente com as chamadas Ajax para esse elemento, ou então terá que fazer tratamento de String.
Valeu Bernardo! Fiz o tratamento de String e deu certo!! :D
Só mais uma dúvida:
Eu tenho todas as chamadas da função de carregamento através do evento onclick do elemento ‘‘.
E deste jeito tá funcionando. =/
Preciso trocar todas as chamadas para o parametro href??
Se tiver, eu vou ter problemas com um menu JS que tenho no site. =/
Bom, acabei trocando as chamadas no sistema todo (do onclick para o href) e deu certo!
Porém, pra variar, surgiu outro problema: (¬¬) No IE não tá funcionando! (Testei apenas na versão 6 ainda).
Ele não chega a gerar erro, mas simplesmente fica carregando carregando carregando…
To saindo do trampo agora, mas amanhã vou verificar o que pode estar acontecendo, mas se alguém já teve esse problema e sabe como resolver, ficaria mto grato! =P
O site que to desenvolvendo é este: http://www.pop-sc.rnp.br
Consegui resolver esse último problema apenas trocando a ordem da chamada/importação dos scripts na página! oO
Mas é claro que agora to com outro problema né? Hehe.. Sou mto azarado mesmo!
O erro dessa vez é o Refresh no FF que não tá funcionado! =/
Coloquei no meu site, mas vive dando pau no Atualizar (principalmente no Firefox.. tem vezes que funciona e outras que não.. =/)
E parece que ele guarda as páginas em cache, e isso dá problema quando vc precisa que a página precise ser recarregada, no meu caso é assim:
Eu tenho uma página que quando o usuário tá logado, exibe uma tabela e um formulário para alteração dos dados desta tabela, e quando não está logado, exibe apenas alguns dados da tabela.
Acontece então que quando eu entro nesta página logada, ele exibe certinho, aí eu deslogo e entro novamente, e ele mistura as informações exibidas (da página qdo tá logado e não)
Quem sabe na próxima versão vcs consigam resolver esse probleminha, mas de resto estão de parabéns! Muito boa a iniciativa!
oi. Muito boa sua solução. Tenho so um problema.
Tentei utilizá-la em um site, onde são carregados muitos conteúdos no início.
Bom, no firefox, funciona perfeitamente, mas no IE, se clicarmos nos links, ele interrompe e dá um erro, dizendo que o “iframe” é um objeto nulo. E esse erro só acontece se não esperarmos todo conteúdo do site carregar. Há algum modo de evitar isso? Ou teria de fazer um preload de todo conteúdo?
Obrigado
Olá Bernardo, tudo certo?
Apliquei seu codigo junto com um ajax simplinho que tenho aqui e deu tudo certo no ie7 e FF2.0, porém no ie6 nao.
Estou usando flash como menu. Se quiser dar uma olhada no projeto que estou desenvolvendo com a sua solução acesse http://www.webgreat.com.br/lasetronik
Obrigado.
Otimo! Estava procurando algo neste sentido.
Para resolver meu problema com o AJAX.
Hoje chegando em casa, vou bolar uma função para pode usar o ajax com mais parâmetros fazendo tratamento de string.
Se tudo de certo eu posto o código aqui, abraço para todos!
Implementei em um site e funcionou que é um beleza!!!
Só tive que fazer poucas alterações para evitar conflitos com o prototype.js .
Se alguém chegar até aqui com o mesmo problema eis como ficou o código:
/**
*
* @author Bernardo Rufino
* @license Creative Commons Developing Nations: http://creativecommons.org/licenses/devnations/2.0/
* @version 0.8
* @description Script to add dynamic navigating functionality, it’s framework independent
*
* !Não retire essas informações!
* !Do not drop this information!
*/
//Just like the prototype, it returns a function wrapped in a context
//CÓDIGO comentado, PARA SER USADO JUNTO COM O PROTOTYPE
/*Function.prototype.bind = function(context){
var closure = this;
var tmp_fnc = function(){
return closure.apply(context, arguments);
}
return tmp_fnc;
}
Object.prototype.merge = function(object){
for(attr in object){
this[attr] = object[attr];
}
}*/
document.navigators = {
settings: {
interval: 100, //The interval which the verification for new data will be done (in miliseconds)
helper: true, //Specify if the onnavigate function will return the helper, do not change!
iframe_src: “control.htm” //The location of the file control.htm, absolute path please
},
initialize: function(){
this.is_ie = (navigator.userAgent.toLowerCase().indexOf(“msie”) > -1) ? true : false;
if(this.is_ie){
this.settings.iframe_src = this.settings.iframe_src.replace(/(\?|#).*$/, “”);
window.attachEvent(“onload”, (function(){
//this.running = true; The iFrame that needs to make it running
this.iframe = document.createElement(“iframe”);
this.iframe.setAttribute(“src”, this.settings.iframe_src);
this.iframe.style.display = “none”;
document.getElementsByTagName(“body”)[0].appendChild(this.iframe);
}).bind(this));
} else {this.running = true;}
},
//The function that is called by the user and puts new data in the hash to be called
helper: function(data, force){
var navs = document.navigators; var data = “[” + this.id + “]” + data;
if(force){navs.data_buffer = “”;} //If force is true then calling sequentially the same helper works
if(navs.is_ie){navs.iframe.src = navs.settings.iframe_src + “?id=” + data;}
else{window.location.hash = “#” + data;}
},
called: false,
history: [],
data_buffer: “”
};
function onnavigate(id, callback){
var navs = document.navigators; navs[id] = {};
if(!navs.running){navs.initialize();}
setInterval(function(){if(navs.running){
var url = window.location.href;
var hash = window.location.hash.replace(/#/, “”);
var theid = “#[” + id + “]”;
if(url.indexOf(theid) > -1){ //If the call is with us!
var data = url.split(theid)[1] || “”;
var new_data = theid + data;
if(navs.data_buffer != new_data){ //If the old content is diferent
callback(data); //Calling the callback function!
navs.called = true; //To make sure was already called to fix the index state
navs.history.push(new_data);
navs.data_buffer = new_data;
}
} else if (!hash && navs.called){ //If the navigators was called and the page is in index state (no hashes), it means reload!
navs.running = false; //To stop the others Intervals to dont make it the same way and broke something
window.location = ((url.indexOf(“#”) > -1) ? url.split(“#”)[0] : url) + “#”;
window.location.reload();
}
}}, navs.settings.interval);
//CÓDIGO ALTERADO, PARA SER USADO JUNTO COM O PROTOTYPE começa aqui
navs[id].merge = function(object){
for(attr in object){
this[attr] = object[attr];
}
}
//CÓDIGO ALTERADO , PARA SER USADO JUNTO COM O PROTOTYPE termina aqui
navs[id].merge({callback: callback});
if(navs.settings.helper){
navs[id].helper = navs.helper.bind({id: id}); return navs[id].helper;
}
}
Muito bom Guilherme
Boa tarde. Esse código do botão voltar funciona em servidor Windows?
olá estou começando a utilizar seus scripts, e ocorreu um problema no internet explorer 6 e com flash, quando se coloca o flash para chamar a função request_source. Se você clicar várias vezes no botão ele abre a url que está no getURL por cima do site.
Respondendo a alguns que tiveram problemas com menus em flash e a navegação ajax… Eu vinha tendo esse problema a muito muito tempo… como não havia nenhuma solução eu fazia uma verificação dos browsers para que apenas o IE6 pulasse a navegação… ou seja, no IE6 nao funcionava a navegaçao com o botao voltar e os links pois dava erro usando menu em Flash
Depois de tanto pensar e 5 sites com a mesma implementação consegui a solução… basta usar a função ExternalInterface do flash no lugar da getUrl… qualquer duvida entra em contato comigo atraves do contato do meu website.. http://www.joaofelipe.net
Caros! ouvi muito falar desse componente, e gostaria de tirar uma dúvida.
No meu site eu tenho uma pesquisa de hotéis, e nessa página eu tenho uma função navegar(npg) que chama uma função ajax passando uma série de outros parámetros. Gostaria que me desse uma luz de como chamo a função navegar(npg) utilizando o componente do Bernardo.
se puder dar uma olhada: http://www.falaturista.com.br/pesquisarhoteis.php?filtro=&cmbcidade1=2615648 fico muito grato.
opa galera, num funciona com o ajax do asp.net, alguém sabe pq?
abraço, e obrigado.
Bom dia,
eu tenho um site que eu faço a chamada do ajax em varias div’s (tenho uma principal, mas tenho outras q eu chamo para facilitar para o usuario na hora de cadastrar um novo cliente, por exemplo).
mas no código q vcs criaram ele sempre procura por uma div só… como eu poderia fazer para chamar essa função somente qdo eu chamar pela div principal?
nao sei se me expliquei bem, mas qq coisa eu posso exemplificar.
fico no aguardo
Ola Bernado Rufino, muito boa a sua solução, so que ainda estou tendo alguns bugs no IE7, não esta salvando o historico corretamente, ja no firefox funciona tudo ok, sera que pq estou usando a versao 0.8? acima vi os releases das versoes 1.0, 1.1, 1.2, 1.3 como faço pra baixar essas versoes mais recente?
Abraço Companheiro
Just went through your pages. There are very few things like my adaptable silver I have a nice joke for you) What is always behind time? (besides myself) The back of a watch.
[…] 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 […]
Thanks!,
mm… really like it..
Só ressaltando, a solução do Guilherme Camargo Cardoso para a Prototype também serve para a JQuery e Mootools, testei todas as duas no meu site… Valeu Guilherme! Salvou minha pele!
Boa tarde, como faço para fazer funcionar um botão voltar criado pelo sistema, que nem no GMAIL?
Faltou eu dizer que é através do Dynamic History.
Descobri qual foi o problema. Foi a tag que está envolvendo a div.