Dynamic History – Implementando

Antes de usar o Dynamic History é aconselhável que você leia uma introdução às páginas web primeiro, é rápido. Antes de continuarmos vou descrever como funciona. Para ver os exemplos vá até o final da página.

Para implementar o histórico dinâmico em seu site, são necessários 2 arquivos, o primeiro é um HTML contendo o código do iFrame (control.htm) que é usado para registrar os eventos no IE e o segundo é o código do script (dynamic_history.js), este se quiser pode ser colado em conjunto com outros códigos ou salvo em um arquivo separado e chamado nas páginas que o utilizarão. Agora que você já sabe como funciona, vamos à implementação.

Download

Você pode copiar e colar os códigos ou baixar o arquivo ZIP contendo os 2 arquivos necessários.

Salvando os arquivos

Agora que você já tem os arquivos em mão coloque o dynamic_history.js em qualquer subdiretório (ou coloque seu conteúdo junto de outro script como dito) de seu site e chame-o na página colocando o seguinte código dentro de <head>:

<script src="dynamic_history.js" type="text/javascript"></script>

Especifique no atributo src o diretório onde ele estiver. Agora coloque também o arquivo control.htm no seu site. Os dois podem ficar em qualquer lugar na estrutura de arquivos, mas vale lembrar que se o control.htm for colocado em algum diretório diferente do qual a página, que utilizará o script, está será necessário configurar seu endereço absoluto depois, nada demais.

Configurando

Você pode pular essa etapa, as configurações padrões já servem, ou se preferir especifique o diretório do iFrame e outras configurações. Abra o arquivo dynamic_history.js e edite o código entre as linhas 29 e 31.

28     settings: {
29         interval: 100, //The interval which the verification for new data will be done (in miliseconds)
30         helper: true, //Specify if the onnavigate function will return the helper
31         iframe_src: "control.htm" //The location of the file control.htm, absolute path please
32     },

Na linha 29 você coloca um numero que será o intervalo de tempo que o script verificará novas mudanças no conteúdo em milisegundos, ou deixe 100 como esta. Na linha 30 não mude, é esse valor (true ou false) que decidirá se a cada chamada à função onnavigate retornará um helper, deixe em true como está. Na linha 31, que é a única que talvez precise ser mudada, você colocará uma string indicando o local onde o arquivo control.htm está localizado, se for mudar aconselho especificar um endereço absoluto.

Usando

Já foi explicado no outro post que mencionei no inicio, mas falarei de novo. O que você terá de fazer é chamar a função onnavigate (antes da janela ser carregado) passando como primeiro parâmetro uma string indicando o id desse evento (sem caracteres especiais) e em seguida a função que será executada quando o usuário avançar, voltar e quando você chamar o helper recebido por ela. Esse helper tem que ser armazenado em uma variável que eu aconselho que tenha o mesmo nome do id do evento. No exemplo abaixo a função que será chamada atualizará o conteúdo de uma <div> via Ajax e atualizaro contador de chamadas:

 1 request_source = onnavigate("request_source", function(data){
 2     //Function from my library, not necessary
 3     var source = $("source")
 4     source.innerHTML = "<p style=\"text-align:center;\">Carregando... Aguarde</p>"
 5     //Another method, it just make an ajax request into the element
 6     source.load(data)
 7     //Refreshing the counter
 8     var counter = $("counter")
 9     counter.innerHTML = document.navigators.history.length + 1
10 });

O código fornecido pela função passada no segundo parâmetros será executado à cada interação do usuário (voltar, avançar, atualizar etc.) e quando o helper for chamado, essa função receberá um parâmetro (data, no caso, que é a url para a chamada Ajax) que será o conteúdo diferente a cada interação. A variável request_source armazena o helper que será chamado para registrar o evento no histórico dinâmico e executar a função passada. Você deverá chamá-lo com o primeiro argumento, a string contendo o conteúdo que será recebido pela função passada, essa string servirá para diferenciar cada estado no histórico. E o segundo (opcional, se não fornecido atuará como false) argumento um boleano (true ou false) indicando se a requisição poderá ser chamada seguidamente, registrando assim várias entradas no histórico. Olhe o exemplo do link chamando esse helper (coloquei o evento dentro do atributo href para vizualizar melhor na página, isso não deve ser feito) para armazenar o evento no historio e executar aquela função passada que faz a requisição Ajax.

<a href="javascript: request_source('sources/control.php')">control.htm</a>

Você ainda ganha o objeto document.navigators, onde você pode consultar a propriedade history, um array com os eventos registrados, a propriedade data_buffer que contém o último evento registrado, e acessar cada evento pela sua string id como propriedade, no exemplo acima eu poderia acessar document.navigators.request_source e ganhar duas propriedades, são elas helper e callback, helper é a mesma função recebida pela variável request_source quando a função onnavigate foi chamada e callback é a função que você forneceu.

Observações finais

Os códigos acima foram retirados da página dos códigos. Pronto, acho que já deu para entender como funciona e como utilizar, para poder entender melhor olhe os exemplos: página com os códigos e scroll com texto, ou o monitor (prefere com fundo verde ou vermelho? hehe), que te dará uma visal geral do que acontece em registro de eventos mútiplos. Abaixo listo as pessoas cujos códigos foram tomados por base e outras me ajudaram a descobrir bugs e dicas, se seu nome não estiver aí comenta!

  • Júlio Greff: Código inicial dos hashes.
  • Cau Guanabara: Código consertado para o IE com iFrame.
  • Mike Stenhouse: Idéia original acima.
  • Dekassegui: Adaptações do script do Júlio.
  • Vicente Souza: Ajuda com dicas
  • Rangel Almeida: Bugs consertados
  • Geraldo Abreu: Ajuda com dicas também.

É isso pessoal, não teria feito nem metade sem a ajuda do pessoal aí de cima (do Micox com divulgação também, hauhau). Antes de lançar ele no ar, eu li diversos artigos sobre diversas implementações para consertar esses problemas (voltar, avançar, atualizar, bookmark, etc.), mas não tomei todos por base, somente os do pessoal acima. Abaixo listo os artigos que li e até os que não li, mas consegui o link, hehe, em português primeiro:

O código está longe de estar perfeito, versão 0.8 ainda, qualquer bug posta aí. Depois pretendo fazer um post detalhando e explicando o código, mas já está bem comentado (in bad english hehe).

Anúncios

94 Responses to Dynamic History – Implementando

  1. […] Voltar do Ajax, Cross Browser Galera, para consertar o botão voltar de sua aplicação use o Dynamic History […]

  2. […] Leia agora Dynamic History – Implementando […]

  3. JulioGreff disse:

    Parabéns, belo código!!! Contribuição muito boa pra comunidade.

  4. Micox disse:

    Chegando à perfeição hehe, bora lá.
    Bermon, eu sei que sou um louco neurótico por querer deixar tudo dentro de 1 função só hehe, que tal tentar fazer isto com sua função (ou um só include)?
    E que tal dar um nome a ela pra ficar mais fácil identificar quando a parada se popularizar? Tipo “bermonAjaxHistory”.

    Daí, pra usar, a pessoa apenas inclui seu arquivo js na página e voilá. Sem complicação nenhuma. Será que dá?

    Ah, também te aconselho a fazer uma página em ingles e postar em digg, dzone e roscripts, dá um resultado muito bom.

    té mais.

  5. Opa, valew Micox!
    Sim sim, vo faze uma página pra ele sim aí tb coloco os botões do digg etc., quero fazer quando lançar a vs 1.0, pretendo tirar o trabalho de salvar um arquivo com iFrame tb. Dps eu ainda vo pedi ajuda tua, huheuahuha… blza?

  6. Fernando disse:

    Pois é … em:
    http://bermonruf.awardspace.com/js/dynamic_history/

    Só fala a respeito de 3 arquivos, o js, o control e a pagina propriamente dita…
    Agora, aonde entra essa framework ? :
    http://bermonruf.awardspace.com/framework/1.0.1 ???

    Essa parte :
    var source = $(“source”)
    source.innerHTML = “Carregando… Aguarde”
    //Another method, it just make an ajax request into the element
    source.load(data)

    Faz parte da sua framework ?

    Eu uso geralmente uma funcao que fiz e funciona assim:
    carregar (‘arquivo,php’,’iddaondevaicarregar’);

    Que que eu preciso fazer ? Não to conseguindo entender mto bem o processo de funcionamento disso… se alguem puder me ajudar…

    Mto obrigado

  7. Opa, blza?
    Esse arquivo é da minha lib, não precisa dele não.
    É só colocar na chamada da onnavigate uma função assim então
    ajax = onnavigate("ajax", function(data){
    carregar(data, "iddaondevaicarregar");
    })

    e chamar assim
    ajax("arquivo,php")

  8. Rafael Frota disse:

    Muito boa esta solução, parabéns!!!
    Mas gostaria de saber como fazer mais de uma requisição. Exemplo: carregar dois conteúdos diferentes em div distintas.

    Abraço e reintero os parabéns

  9. Rafael Frota,
    Vlw cara, para conteúdos diferentes veja este exemplo aqui e olhe o código fonte, está bem explicado, acredito que dará para entender.

  10. LUIZ GUSTAVO disse:

    bom dia Bernardo,
    Estou entrando nesse uso de AJAX agora e ainda tenho muitas duvidas… vi seu script sobre o history, mas nao estou sabendo aplicar.. será que pode me ajudar de forma mais detalhada?
    tenho uma estrutura assim: um div total, um top, um lateral com menu, um conteudo (recebe todas as paginas externas…) e entao quero saber onde aplico o seu script… por favor, tem como me ajudar, sendo que essa estrutura está numa pagina index.php onde ja tem o script que determina a chamada do ajax… aguardo contato.. obrigado… Gustavo

  11. Carlos Souza disse:

    oi, li todo o artigo , e estou tentanto entender , trabalho com asp , minha pagina carrega um listagem de produtos com +- 200 itens, onde o usuario escolhe um produto digita na mesma listagem a QUANTIDADE e clica no botão comprar, chamo um scrip asp que calcula e grava em um tabela compras, e volta para a página de LISTAGEM DE PRODUTOS, neste momento recarrega tudo novamente. Gostaria de usar essa tecnologia para evitar esse recarregamento da página pois a tabela está em Acess e demora para muito a recarga, testei o voltar do navegador e funciona NÃO RECARREGADA..simplesmente usa a página anterior sem atualiza.
    ——————
    como faze o scritp retornar sem selecionar os produtos novamente?
    ——————
    Grato

  12. Luiz Gustavo,
    Gustavo,
    Você já tem a função que faz requisições Ajax, certo? Então faça o seguinte, como expliquei lá no post, faça uma chamada à função onnavigate, passando uma string para identificação como “ajax”, por exemplo, e depois uma função anônima que recebe um parâmetro, e no seu caso será a URL das páginas para fazer a requisição, aí você coloca a chamada a sua função/método que faz a requisição usando aquele parâmetro e mostrando o resultado na div conteúdo que quer. Aí nessa chamada à função onnavigate você receberá de retorno uma função, e guardará ela em uma variável que pode se chamar ajax, que servirá para chamar a sua função anônima e registrar no histórico, é só associar a chamada a essa função, que está nessa variavel, em seus links, colocando como primeiro da chamada parametro a URL.

    Carlos Souza,
    Para acabar com o recarregamento, você pode usar Ajax, dê uma olhada nesse artigo: Ajax Demo. Sua implementação não seria muito dificil de adaptar, lembrando só que adicione os eventos em um arquivo .js e faça isso sem quebrar seu site para quem não tem javascript. Qualquer dúvida é só falar!

  13. Carlos Souza disse:

    ok , obrigado vou tentar , já que está ai, se quizer dar uma olhada a página na listagem geral leva 1, minuto para carregar…imagine ficar indo e voltando na mesma listagem ficará enviável…http://www.ascamanha.com/csouza/default.html
    usuario: 9999 – senha = c2995 , podem acessar avontade, é uma área de teste,o cadastro de produtos está com 600 reg..

    obrigado pela atenção…vou tentar

  14. Carlos Souza disse:

    oi, vi os exemplos mas com ASP não consegui montar , peguei um exemplo que atualiza a listagem apos clicar em um botão, fiz funcionar , mas no meu caso, a chamada vem de um index.asp e entra carregando essa listagem…após fica ali até ser fornecido a quantidade de produtos e a pessoa clica em compra , faço uma chamada a outra script .asp , que grava em um tabela e retorna automaticamente a listagem,, e esse retorno que gostaria de executar todo o select * from produtos novamente..enfim carregar todo formulario (listagem novamente. não estou conseguindo..os exemplos a maioria são em php…não consigo aplicar no ASP.
    obrigado..

  15. Cia Tecno disse:

    Boa Noite.

    Pelo que vi o que este script faz é pegar o document.location ou top.location ou parent.location e divide pelo caractere # … Seria isso? Fiz um teste no Firefox ele ativa o voltar,… menos no IE, e seria por isso o acrescimo do IFrame?

    Abraços
    Até mais!

  16. Carlos Souza
    Cara, não sei nada de ASP, acho que não posso te ajudar, realmente a maioria dos exemplos é em PHP, mas se for alguma coisa relacionada ao Js fala aí.

    Cia Tecno
    Sim, o iFrame é para o IE que não difere URLs com Hashes.

  17. Rodrigo Felix disse:

    Alguém já tentou utilizar essa solução com o framework mootools?? Tá dando sempre erro quando uso os dois. Acho q a definição de alguma função tá se chocando. Alguém sabe me dizer o que está de errado e uma sugestao para solucionar ou a solução? Vlww

  18. Rodrigo Felix,
    Verificarei qual é o conflito, vlw por ajudar!

  19. Rodrigo Felix disse:

    Eu que agradeço… Pra ajudar, o erro que tá aparecendo é esse no Firebug:

    Java class HP3.HPTI3 has no public field or method named “$tmp”
    [Break on this error] if (!(el = elements[i]) || !el.$tmp) continue;

    Na linha 2613 do mootools.v1.11.js gerado sem compressao e com documentacao. Vou tentar ver o que pode ser também. Se conseguir resolver te mando uma resposta.. Flww

  20. […] foi, o bom e velho XHTML, CSS, Javascript (tradicionais scripts, Mootools e tentarei melhorar o Dynamic History) e tentarei postar mais um pouco de […]

  21. Rafael Frota disse:

    Muito bom este script mas estava fazendo uns testes e ele não lê os script das páginas que estão sendo carregadas pelo ajax…

    Bom trabalho o de vc´s

  22. Rafael,
    Esse script não faz as chamadas Ajax, o seu código (ou framework) é que deverá tratar as páginas requisitadas.
    Vlw!

  23. Iorrana disse:

    Olá Bernardo,
    Estou com dificuldades para aplicar esta solução porque minha função de chamada do ajax tem mais de um parâmetro, mas a função onnavigate só considera o primeiro parâmetro.
    Uso a prototype e por exemplo minha função de chamada do ajax é :

    function getHTMLDiv(areadiv,url,pars)
    {
    var target = areadiv;
    var myAjax = new Ajax.Updater(target, url, {method: ‘get’, parameters: pars, evalScripts:true});
    }

    Fiz uma adaptação para não ter de alterar o código de todas as paginas e a função ficou desta maneira:

    getHTMLDiv = onnavigate(‘getHTMLDiv’, function(areadiv,url,pars){
    var target = areadiv;
    var myAjax = new Ajax.Updater(target, url, {method: ‘get’, parameters: pars, evalScripts:true});
    })

    Mas quando chamdo a getHTMLDiv o segundo(url) e o terceiro parâmetro(pars) chegam indefinidos.
    Puts.. está me faltando algum conhecimento para entender porque isso acontece.
    Você tem alguma sugestão? Ou sabe porquê?

    De resto parece que as funcionalidades do navegador, avançar, etc.. funcionam bem. Mas ainda n consegui testar dentro das minhas soluções por este fator.
    Aguardo um retorno seu.
    Obrigada.
    Iorrana

  24. Iorrana,
    Na próxima versão, ao invés de uma String só poderá ser usado um objeto JSON também. Mas até lançar, você pode fazer um tratamento de String.

  25. Eduardo disse:

    Olá Bernardo, postei uma vez mas nao apareceu no blog, desculpe se aparecer duas vezes.

    Estou usando Ajax para nao dar o reload na pagina pois uso um menu animado em flash.

    Ajax que uso:
    function openAjax() {
    var Ajax;
    try {
    Ajax = new XMLHttpRequest();
    } catch(ee) {
    try {
    Ajax = new ActiveXObject(“Msxml2.XMLHTTP”);
    } catch(e) {
    try {
    Ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
    } catch(e) {
    Ajax = false;
    }
    }
    }
    return Ajax;
    }

    function carrega(page, id){

    ajax = new openAjax();

    var div = document.getElementById(id);

    ajax.onreadystatechange = function(){
    if(ajax.readyState == 1){div.innerHTML=”Carregando…”;}
    if(ajax.readyState == 4){div.innerHTML=ajax.responseText;}

    }
    ajax.open(“GET”,page,true);
    ajax.send(null);
    }

    No index uso junto com seu codigo:
    xajax = onnavigate(“xajax”, function(data){
    carrega(data,”principal”);
    });

    No flash 8 e faço a requisição pelo
    getURL(“javascript:xajax(‘conteudo.php’,’conteudo’)”) nos botoes.

    O problema:

    No FF2.0 e ie7 fica tudo perfeito. Mas no ie6 nao.

    o endereco que estou desenvolvendo: http://www.webgreat.com.br/lasetronik

    Se tiver alguma solução ficarei muito grato!

  26. O código está certo, funciona sem flash?!

  27. Eduardo disse:

    Sim.

    O problema eh que a requisição do link normal em HTML dá certo. Já no flash nao. Mas isso é só no ie6. No ie7 e no FF2.0 fica tudo certo.

    Alguma sugestão?

  28. Nunca testei com Flash, estranho, já tinha ouvido problemas relacionados a ele… Vou ver se acho algo

    • Manuela disse:

      I know this if off topic but I’m looking into starting my own weblog and was wondering what all is required to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web smart so I’m not 100% positive. Any tips or advice would be greatly appreciated. Thanks

  29. Thevans disse:

    Boa tarde Bernardo, tudo bem?

    Cara estou com o mesmo problema citado mais acima, não consigo usar o ajax_request junto do mootools.

    Tem alguma idéia de como resolver este conflito?

    Obrigado e até mais!

  30. Thevans,
    Ainda não verifiquei o problema com a Mootools, se tiver, poderia passar um link com a página aonde o problema ocorre?

  31. Jonathan C.S. disse:

    Parabéns pelo código, na verdade é muito loco !, acho que um dia você poderia escrever um post sobre essas chamadas de eventos e jeitos diferentes de chamar as funções. Você já explicou num post acima como chamar minha própria função do Ajax, naquele caso você fex Ajax=onnavigate(“Ajax”, function(data) { carrega(data, “iddonaveg”) E depois só chamar Ajax(“XXXX.htm”), então essa variável DATA é um parâmetro no caso a URL, na função carrega o outro parâmetro é fixo,

    Na minha implementação da função Ajax, eu passo vários parâmetros, com “envia_form”, “metodo” , etc… ( function loadURL(url,target,metodo,form){ …. )
    como arrumar o “onnavigate” pra aceitar todos esses paremetros ?

    exemplo:
    loadURL = onnavigate(“loadURL” , function(url,target,metodo,form){
    loadURL(url,target,metodo,form);
    }
    Seria assim ?
    p/s: desculpe a minha ignorância mais esse código é realmente complicado.

    de qualquer forma valeu pela excelente demonstração de como fazer a coisa funcionar.

  32. Jonathan C.S.,
    É rapaz, hahaha, num é das mais simples não, hehe…
    Na próxima versão pretendo ao invés de uma string, colocar suporte a JSON, mas por enquanto é só String. Você pode fazer tratamento de String com expressões regulares, ou colocar um objeto literal (JSON) convertido em String e depois usar eval para voltar a objeto, nunca testei, talvez alguns caracteres sejam ilegais para url, então talvez seja necessário usar encodeURI/decodeURI.

  33. Pessoal, eu num sou muito de postar em foruns ou blog por que na maioria do casos solicitão CADASTRO, ODEIO CADASTRO!

    Seguinte, cheguei agora em casa e fiz o código aqui pra niguem ficar chorando.
    Estou parabenizando Bernadinho, pela otima explicação e solução do problema (UMA DOCUMENTAÇÃO COMENTADA EM PORTUGUÊS AJUDA A GALERA), quem for esforçado e dedicado pega rapidinho o esquema.

    SEGUE MEU RACIOCÍNIO:

    Bernadinho fez o codigo como esta no exemplo: request_source(data)

    Eu tenho uma função que ja uso no meu site: ajax(url,local,msg)

    IMPOSSIVEL ADICIONAR PARÂMETROS NO PROCEDIMENTO DO NAVEGADOR, ISTO ACONTECE, POR QUE O METODO É DO NAVEGADOR E NÃO SEU. ENTENDEU? VC NO MAXIMO VAI REESCREVER O METODO!

    Bernadinho + Eu deu isso aqui gente:

    Eu mudei minha função com nome de ajax para ajax2. (Retardado vc vai mudar sua função ai tbm ok!)

    Agora vc vai criar uma função igual a q vc tinha ai, neste caso ajax. Saco? Pegou a ideia. aff. vai lendo…

    A função que acamos de criar faz o seguinte:

    function ajax(url,resposta,msg){
    request_source(url+’|’+resposta+’|’+msg);
    }

    Vai executar a função do Bernardinho, so que dentro da função do Bernadinho vc vai colocar isso:

    request_source = onnavigate(“request_source”, function(data){
    var url = data.split(“|”)[0];
    var resposta = data.split(“|”)[1];
    var msg = data.split(“|”)[2];
    ajax2(url,resposta,msg); //<———- MAGICA
    });

    Se você responder falando que não funcionou, leia todo a documentação da Microsoft, W3C, Firefox, WWW e se mesmo assim vc não entender esquece ajax. De amigo, pra amigo, vc não nasceu pra isto!

    Funcionou perfeito aqui! não precisei mudar nem UM código do ajax no meu sistema. testei 90% do sistema, totalmente estavel!

    t+ negada!

  34. Euler,
    Muito bom seu exemplo Euler! Ótima contribuição!

  35. Luiz Fernando disse:

    Olá Bernardo,

    Tenho uma dúvida. Temo como adaptar esse script para quando o javascript for desabilitado ou não tiver tal suporte, o link funcione normalmente sem usar ajax?

    Exemplo:
    Inicio

    Ou você acha que não devo preocupar com a possibilidade de meu site ser executado em um browser sem js?

    No mais, seu script ta perfect!
    Parabéns!

    Vlw

  36. Luiz Fernando,
    Deve se preocupar sim! Site sem acessibilidade hoje em dia não é site.
    O modo certo de fazer é criar seu sistema sem Ajax prineiro, depois em um arquivo .js separado que é chamado pelas páginas, adicionar um evento nos links para chamar o Ajax (no caso o helper do Dynamic History), e dar um return false para o link não ser seguido.

  37. Leandro disse:

    Galera tira uma dúvida. Esse exmplo de botão voltar no Ajax serve para servidores Windows?

    To tentando rodar e não vai.

  38. Leandro,
    Sim, ele só roda no cliente, não importa o tipo de servidor, o problema ás vezes é do Ajax e não do Dynamic History.

  39. Leandro disse:

    Fala Bernardo, beleza…será que vc poderia me dar uma força…to ficando muito pirado e ansioso para fazer esse código rodar….Cara sem dúvida é fantástica a sua solução.

    Veja só.

    – Copiei o arquivo control.htm e nao alterei nada.
    – Copiei o arquivo .js e tb nao alterei nada.
    – Tenho uma subpasta sources e dentro um arquivo chamado teste.htm

    Veja o códido da index.

    Untitled

    request_source = onnavigate(“request_source”, function(data){
    source.load(data)
    var counter = $(“counter”)
    counter.innerHTML = document.navigators.history.length + 1
    });

    0 chamadas / calls

    control.htmTeste para uma página HTML

    Conteudo

    QUANDO ACESSO A INDEX NAO DA ERRO, MAIS QUANDO CLICO NO LINK DA ERRO NA LINHA 8 E DIZ “OBJECT DOESN’T SUPPORT THIS PROPERTY OR METHOD”

    TO FICANDO PIRADO E NAO CONSIGO RODAR. TO RODANDO NO IIS EM IE6.

    AGRADEÇO A AJUDA DESDE JÁ.

  40. Leandro disse:

    Aeeeeeeeeeeeeeeeeeeee, consegui fazer funcionar….

    Cara, a ultima pergunta. Quando começo navegar em agluns links principalmente quando o link está em um Flash que tenho no cabeçalho a página nao carrega, fica branca.

    Já aconteceu isso com alguem ou com vc?

    Valeu.

  41. Léo disse:

    Euler, muito boa a sua soluçao. Mais te pergunto. Será que nao da pra tirar o nome da DIV do link.

    Tipo:
    quem_somos.asp?pg=metodologia|quem_somos

    Ta indo no ultimo parametro o nome da DIV. Tentei mais ainda nao consegui.

  42. Léo disse:

    Olá alguem conseguiu fazer funcionar no IE6 com Flash? Aguardo retorno e obrigado desde já.

  43. Roberto Pires disse:

    Gostaria de Agradecer ao Bernardo pelo código e ao Euler pela dica para informar parâmetros adicionais que sempre são necessários nas Funções (Ajax em especial). Nos meus testes por enquanto 100%. Porém como é de praxe na vida de nós WebFazTudo temos alguns probleminhas: Como alguém já postou anteriormente a url fica enorme se adicionar todos os parâmetros, mas para isso cotornamos com o uso de Frames. Mas com isso como fica se o Internauta deseje copiar o atalho para enviar por email ou algo assim ? Posso estar querendo d+, visto que basta eu deixar da maneira original que funciona bem. Mas isso envolve para mim a questão de uma navegação mais funcional, mais limpa. Abraços a todos.

  44. fernando ferrandini disse:

    Bernardo,

    Muito boa solução. no FF ta indo que é uma beleza. Infelizmente o “truque” usado pro IE ( o uso do control.htm) me complica um pouco pois a forma que eu gero minhas páginas difere dum layout .html em pastas no servidor web e tal, por isso fica dificil eu dizer onde esta control.htm.

    mas minha pergunta é : Em que momento no seu codigo voce “capta” o uso do back e forward? é a unica coisa que não entendi como foi feito.

    Sabendo como vo tentar inventar uma forma de funcionar no IE sem esse control.htm, senão conseguir solamento pra mim mesmo haha!

  45. Joao Felipe disse:

    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

  46. Jean disse:

    Gostaria de agradecer pelo código e pedir uma ajuda…
    No FF está normal… Mas no IE, ele tem que carregar a página toda para que eu possa navegar, se clicar antes disso dá erro de página…ele diz: ‘iframe’ é nulo ou não é um objeto…pod me ajudar?

  47. Leandro Silva disse:

    Olá, só uma dúvida, aparentemente, não consegui o funcionamento junto com o ajax do asp.net (2.0), gostaria de saber se há alguma diferença.

    obrigado;

  48. Jean,
    Vou ver se acho um jeito de resolver o problema

    Leandro,
    Não, o que você tem que fazer é encapsular a função que faz a chamada assíncrona

  49. Ola, o codigo acima quando joguei para o meu site deu tudo ok… mas so funciona se contiver a linha

    Quanto eu a retiro o script nao funciona, da um erro de objeto requerido, o que pode ser? ja que vc disse que nao precisa usar essa parte do codigo

    Atenciosamente,

  50. Rui Peixeiro disse:

    Olá,

    Primeiro que tudo, parabéns por esta biblioteca. Está muito boa! Simples e eficaz!

    Mas, quando usada juntamente com o jQuery, este passa a dar o erro “name.replace is not a function”.

    Já dei voltas e ainda não vi de onde vem o erro. Já aconteceu com mais alguém?

  51. Rui Peixeiro disse:

    Bem, já descobri a falha, é o prototype merge…
    Apaguei-o e substitui a linha:
    navs[id].merge({callback: callback});

    por:

  52. Rui Peixeiro disse:

    Bem, já descobri a falha, é o prototype merge…
    Apaguei-o e substitui a linha:
    navs[id].merge({callback: callback});

    por:
    var config2 = {callback: callback};
    var i;
    for(i in config2)
    navs[id] = config2[i];

    Espero que tenho ficado bem…

    • Cleber Mendes disse:

      Boa noite,
      cara essa sua dica me ajudou demais.
      Uso jquery com jquery-ui nas minhas aplicações web.
      Estouf fazendo um site em q uso isso, e o ajax do jquery. Porem precisei habilitar o vai e volta das paginas, e o link direto, ai achei um cara q desenvolveu um script js pra isso, blz funfo, mas meu calendario do jquery ui paro. Ai debugando vi que era esse prorotype merge, não sei o que ele faz mas funciono trocando pelo que vc disse.

      Vlw, abraços

  53. Paulo Bocaina disse:

    Ola Bernardo!!
    Tava vendo seu artigo e pensei em usa – lo, mais eu sou novato em ajax… to caminhando…eu queria saber se da pra usar em sites que n sejam dinamicos..ex: tenho um site feito em css e ajax que joga conteudo de paginas na principal, mais quando faço isso o botão do navegador Ie FF fica desabilitado..quero saber se sua função pode fazer isso no meu site ou apenas em sites dinamicos.. vi tbm que vc usou iframes e meu site não possui.se da pra fazer me esplica melhor e como devo agir..!! grato

  54. prilady disse:

    Já tem alguma solução com a mootools?

  55. Eric Spala disse:

    Meu cara, você está de parabéns pelo seu script, pois ele não depende de framework, e pode ser facilmente adaptado para qualquer e diferentes javascripts em masma página.

    PORÉM, gostaria muito que ele pudese ser chamado sem usar um comando em javascript, digamos, sem precisar de escrever, por exemplo javascript:abrir(‘pagina2.html’);
    Gostaria que simplesmente que a unica coisa necessária fosse garregar um link diferente, por exemplo, simplesmente criar um link assim: http://meusite.com/index.html#%5Babrir%5Dpagina2.html ;
    assim o usuario poderia abrir a pagina em uma nova aba , ou copiar o link sem ter que clicar para posteriormente poder visualizar o conteudo solicitado pela própia URL.

    Entendeu?

    Seu trabalho ficou muito bom, a não ser por esse detalhe. Parabéns

  56. Eric Spala disse:

    ps: no exemplo do link: http://meusite.com/index.html#abrirpagina2.html
    os colchetes devem existir normalmente entre a palavra abrir, o simbolo não apareceu no post anterior.

  57. Cristian disse:

    oi dei uma olhada no material que disponibilizo e testei e não funciona a função para carregar o conteúdo, ai procurei nos comentários e achei uma quase resposta, tipo tu diz para criar uma função com onnavegate tipo isso aki

    pagina = onnavigate(“pagina”, function(data){
    conteudo(data,”iddivconteudo”);
    });

    e nos links colocar assim

    pagina(“arquivo.php”);

    mas não estou consequindo da um erro assim ooo

    Mensagem: O objeto não dá suporte para a propriedade ou método

    Como posso fazer isto funcionar??

  58. Gustavo disse:

    Bom dia a todos,

    Estou tentando baixar os scripts, mas os links para o mesmo não estão funcionando, alguém pode disponibilizar em outro lugar ou enviar para o meu email?

    Desde já agradeço.

    email: gustavome_983@hotmail.com

  59. Prilady disse:

    Não funciona com ie8, alguem sabe como fazer funcionar?

  60. Prilady disse:

    Ao usar junto com o internet explorer ao clicar no botao voltar ele volta a primeira vez mas na segunda ele trava e só volta se apertar outra vez. Como resolver o problema? Gostei muito da biblioteca está funcionando muito bem no meu site e a solução para a Mootools e JQuery pode ser resolvida pelo código do nosso amigo Guilherme Camargo Cardoso https://bermonruf.wordpress.com/2006/11/24/solucao-simples-para-o-botao-voltar-cross-browser/

  61. Alexandre disse:

    o Bernardo to querendo usar com o prototype, como que chama a função utilizando do ajax do prototype.js, desculpe a leiguisse, sou meio cabação ainda em js, to patinando… Obs.: Funcionou certinho com a função do arquivo ajax.js, mas quando uso em outros links a função nativa do prototype:

    function arquivo(){
    new Ajax.Updater(´destino´, ´arquivo.php´, { method: ´get´ });
    }

    e chamando por link:
    Venha arquivo
    ta dando algum conflito? Tenho q usar o framework por causa das galerias que to montando =P

  62. Alexandre disse:

    OPS.: o link: href # onclick arquivo()

  63. Tadeu disse:

    Olá pessoal, primeiro eu gostaria de dizer que esta muito bom oq vcs fizerao, parabens.
    Eu somente não consegui implementar no meu ajax. Pq assim. eu tenho uma funcao ajax que eu chamo assim: postajax(‘pagina.html’,’divQueVaiAparecer’); e todo o link eu coloco a pagina. COmo eu faço para colocar nesse funcao de vcs, eu tiro do a href ?
    QUem puder me ajudar eu agradeço.

  64. Wagner disse:

    só tenho uma coisa chata pra contornar… eu tenho muitos subdominios que vao se utilizar do mesmo script, então

    iframe_src: “http://www.saps.com.br/saps_files/control.htm” //The location of the file control.htm, absolute path please

    da um erro chato de permissao negada no ie :(

  65. Wagner disse:

    puxa, nessa parte:
    iframe_src: “http://www.saps.com.br/saps_files/control.htm”

    por eu ter muitos subdominios, que usarão o mesmo script, tem um problema chato de permission denied no ie

    eu nao queria ter um dynamic_history.js (ou control.htm) pra cada subdominio, tem como contornar isso?

  66. Joaquim disse:

    Olá Bernardo, tudo jóia?
    então…
    sou novo em Ajax, na verdade bem novo…
    recebi um site para ajustar…
    ele é feito todo em ajax…
    e tem várias funções como essas 3 na pág principal:
    _____________________________________________________

    function contato(){
    ajax(‘contato.php?tipo=contato’,’listaImoveis’);
    }

    function procuro(){
    ajax(‘contato.php?tipo=procuro’,’listaImoveis’);
    }

    function proposta(imovel){
    ajax(‘contato.php?tipo=proposta&imovel=’+imovel,’listaImoveis’);
    }
    _____________________________________________________

    Gostaria de saber como de vo colocar a função que você descreveu na pág principal…
    Função que você descreveu:
    _____________________________________________________

    request_source = onnavigate(“request_source”, function(data){

    //Refreshing the counter
    var counter = $(“counter”)
    counter.innerHTML = document.navigators.history.length + 1
    });
    _____________________________________________________

    Eu tenho que colocar essa função dentro de cada função dequela?

    Dae eu não coloca “data” e sim “url” é isso?

    Desde já agradeço a ajuda e lhe dou parabéns pelo código… e por explica-lo para iniciantes igual eu…

    Valeu!

  67. Marco Antonio disse:

    Bom dia!

    Parabéns, eu estou procurando algo que realmente funcione e creio pelos posts que li, que minha busca não foi em vão.

    Bernardo eu tentei baixar o arquivo zip e também visualizar os códigos, mas creio que os links estão quebrados.

    Se puder verificar ou me enviar por email, te abradeço.

    Obrigado! Marco

  68. Edu disse:

    cara show de bola
    fui fazer umas ancoras na mao e deu maior trabalho
    com sua js fico massa dmais

  69. Éder Rocha disse:

    Bernardo, você está simplesmente de parabéns. Salvou minha vida em um projeto. Quando este projeto engatar, juro que vou enviar-lhe uma garrafa de whisky(um 15 anos). Hehehe.

  70. Éder Rocha disse:

    Ihhh rapaz,acho que comemorei antes do tempo. O danado do IE 8 não abre o ajax. Ele abre a pagina a ser carregada em uma nova janela e na janela principal ele mostra: [object]

    Ao exibir codigo fonte, é mostrado isso: [

    Apenas uma abertura de colchete. Alguem tem uma ideia de como resolver?

  71. Adriano disse:

    Olá galera!
    gostei muito desse código, era o que estava precisando.
    Só que to tendo um probleminha.
    estou chamando uma página dentro da div, essa página é da lightBox 2.0.4. Quando vou abrir a imagem, ela abre em outra tela. Alquem pode me da uma solução?

  72. ZombieMG disse:

    Ninguém ai conseguiu q

  73. ZombieMG disse:

    Ninguém ai conseguiu que funcionasse no IE 7+ ?

  74. Berry Rucks disse:

    I ran across search engines and find this blog that fulfill my needs. There is a thing I do not agree but It doesnt matter since I think it does not hurt the whole content.

  75. Snowyzya disse:

    Could I borrow your phone, please? hot fitness models
    >:-)

  76. betolimma disse:

    Alguém poderia me ajudar? não cosigo chamar pagina nenhuma.
    copiei o exemplo e quando chamo os links nada acontece.
    Aliás da um erro:
    $ is not defined
    var source = $(“source”)

    Grato

  77. pessoal, abaixo está a função GETRANSFER para que funcione no IE8 também(talvez funcione com anteriores), ele detecta qual o navegador e corrige o funcionamento de acordo com o mesmo:
    function getTransfer()
    {

    var xmlhttp=null; //Ou coloque false
    //alert(navigator.appName);
    if(navigator.appName == ‘Microsoft Internet Explorer’){//IE
    try{xmlhttp=new ActiveXObject(‘Msxml2.XMLHTTP’);}
    catch(e){}
    }else{//NAO IE
    if(typeof(XMLHttpRequest)!=”undefined”){xmlhttp=new XMLHttpRequest();}
    var opts=new Array(‘Microsoft.XMLHTTP’,’Msxml2.XMLHTTP’,’Msxml2.XMLHTTP.6.0′,’Msxml2.XMLHTTP.4.0′,’Msxml2.XMLHTTP.3.0′);
    for(var i=0;i<opts.length;i++)
    {
    //alert(opts[i]);
    try{xmlhttp=new ActiveXObject(opts[i]);}
    catch(e){}
    }
    }

    return xmlhttp;
    }

  78. Auuiyevz disse:

    A financial advisor http://tiqycuduti.de.tl nymphets young nymphets gorgeous, i love her voice and how she loves to swallow. wish you would have shown her beautiful tits more.

  79. Bermon!!! Perfeita a solução cara ta de parabéns!!!
    Só nao consegui fazer funfa no ie9… usei o GETRANSFER mas mesmo assim não funfou.
    Vc tem alguma solução?

    Desde ja agradeço pela solução!!!

  80. E ae Bermon o erro que aparece no console é este:

    HTML1114: A página de código utf-8 de (Cabeçalho HTTP) substitui a página de código iso-8859-1 conflitante de (Marca META)
    control.htm?id=home.php – não ha codigo fonte disponível para este local

    Se souber algo posto aqui!

  81. Corrigido aqui Bermon coloquei o control.htm no root e no diretorio do script e deu certo!!!

    VLWWWWW!!!

  82. Felipe Andres disse:

    Eaeee Bernard!

    Eu sou um designer e entendo pouco de javascript, Desenvolvi uma página que carrega conteúdos por Ajax. Todos os métodos e eventos são programados com jquery. Agora quero adicionar a funcionalidade do histórico com os botões voltar, será que vai existir algum conflito, ou algo deixe de funcionar caso eu utilize seu script? Porque eu note que você usa um outro framework.

    Testei um outro script em jquery, porém ele tem problemas com IE e quando eu clico voltar para a página inicial. o conteúdo no centro fica em branco. (O seu não apresenta esse problema, por isso resolvi usa-lo).

    Obigadoo! e desculpe por incomodar

  83. Felipe Andres disse:

    Bernardo, eu percebi que o seu framework entra em conflito com o jquery, ambos não trabalham simultaneamente. Como faço para que a aplicação funcione sem utilizar o seu framework? Isso é possível?

    Preciso do jquery funcionando… Obrigado!!

  84. Heya just wanted to give you a quick heads up and let you know a few
    of the pictures aren’t loading properly. I’m not sure why
    but I think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.

  85. Valerio Pregnolato disse:

    Olá Bernardo. Sou novo em javascript, mas estou tentando adaptar seu codigo “Dynamic History” no meu programa, porem não esta fiuncionando…. Segui todas as suas instruções acima. No Inspector do browser ele dá a mensagem “Uncaught ReferceError: request_source is not defined”.

    Não teria faltado nada no seu código fonte?

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: