Como identificar botões forward e back do navegador?

Estou concluindo um site que utiliza “streaming” (áudio) de um servidor, e este permanece audível em todas as páginas (iframes) navegadas.
A página principal(index) contém o título, o player e informações do áudio eos links para navegação pelas páginas (iframes) e abaixo disto, o local com o “iframe” onde as páginas são apresentadas.
A página principal (título, player e links) ocupa uns 15% da visibilidade da tela e o restante abaixo contém a “iframe” onde rola ás páginas com o restante.
Ocorre que fiz um sistema de “log” que registra o tempo e a ordem de navegação pelas diversas páginas, e ao final, “encerra/destroy” a “session” e fecha o “log”. Inclusive ao clicar no X do navegador ele executa a função de encerramento.
Ocorre que voltar e avançar pelo navegador está causando erro ao registrar o Log, e preciso de saber se existe algum método, evento etc. para identificar se os botões “forward” e/ou “back” foram clicados pelo usuário, e como seria isto.
Grato,
Luiz Carlos_Dias

Você vai precisar dar uma olhada na History API.

Tem um evento lá onpopstate que te dá avisos de navegação, mas só se você estiver usando a History API pra registrar as navegações. O que você pode fazer é registrar um replaceState a cada navegação.

Sergio, muito obrigado pela sua atenção.

Não sei se entendi corretamente, pois é a primeira vez que me envolvo com este assunto, e só conheço sobre history o que li nestes últimos dias,quando testei inúmeras sugestões encontradas na web mas nenhuma levou ao reconhecimento dos botões do navegador. O que você sugere seria registrar um “replaceState” a cada navegação que no meu caso, esta navegação ocorre pela acionamento do link correspondente a página que está sendo inserida na iframe e não causa registro na url da página do navegador, ou seja, usar o repaceState para causar este registro, é isto?

Se for isto, há um pormenor que eu gostaria de observar. Embora não apareça as Urls no navegador, os botões forward e back causam o avanço e o retorno respectivo nas páginas apresentadas na iframe, logo o navegador está buscando esta informação em algum lugar que se eu pudesse captar quando isto muda poderia tentar uma ação oposta anulando a ação exercida por aqueles botões ou até evitar que a ação seja exercida por aqueles botões.
.
Será que consegui colocar o meu raciocínio de modo claro do que estou pensando ou não é por este caminho, pois eu sou um aprendiz na tentativa de entender este processo. Se tiver escrito bobagem, por favor me desculpe, mas como disse, ainda estou perto do “zero” conhecimento nisto.

Abraços,

Luiz

É que até onde eu saiba, vc nao no consegue saber do back / forward sem ser pela history API. Entendi que vc usa o iframe pra navegação, mas acho que vai ter que dar um jeito de fazer o replaceState dentro dele

Sergio, desculpe-me ocupa-lo.

Você teria como me mostrar um pequeno exemplo de como colocar o repaceState no código? Creio que seja esta uma forma de passar a Url do código que está sendo carregado em cada iframe. Imagino que seja logo após o include do Javascript, ou seja no início, como já ví em outros exemplos.

Um fato que talvez possa estar fazendo os meus testes fracassarem seja por eu estar usando no desenvolvimento, o servidor internamente no meu PC através do EasyPhp, mas mesmo assim, sempre mostrae sempre a URL da página principal o tempo todo o que entendi ser correto por ser as demais páginas processadas no ifame.

Todas as chamadas das páginas são executadas dentro de uma função em javascript, disparadas pelo click em um dos links na parte inferior da área de títulos etc. Nesta função controla a página que entra e a que sai, atualizo o Log, passo parâmetros se for o caso etc.

Uso também várias vezes o Ajax com Jquery para carregar scripts em php, principalmente para atualização do Mysql, e tudo isto está funcionando bem. Mas também não encontrei nenhuma solução via Jquery.

Te agradeço muito esta ajuda, pois preciso realmente de um empurrão neste assunto. Ví vários comandos e vários exemplos mas não consegui entender a ponto de modificar e adaptar a minha aplicação.

Quando precisei interceptar o clique no X do navegador lutei bastante para entender e fazer funcionar o onbeforeunload até que consegui um exemplo que funcionou e daí fiz inúmeras adaptações modioficando até que entendi o que eu poderia fazer para adaptar no meu código e resolvi o problema. Se houvesse um evento onForewar() ou onBack() seria mamão com açucar pois o meu objetivo não é bloquear estes botões no navegador, mas sim identificar a sua ação e torna-la sem efeito apenas na minha aplicação, pois não devo permitir que esta ação afete outras abas do navegador abertas simultaneamente pelo usuário.

Mas se eu tiver como saber pela history API conforme a sua sugestão, pode ser por aí o caminho para solucionar o problema, talvez testando se a history API mudou sem ter sido causado pela função que carrega as páginas na iframe, mas este caminho talvez crie o inconveniente de ter de usar o setInterval em intervalos curtíssimos para comparar a mudança no history API, e isto sobrecarregar o servidor. Note, não estou afirmando que isto ocorreria, mas temo que poderia ocorrer se a solução contemplasse o uso do Interval.

Grato,

Cara, nao to com mto tempo pra montar um demo. Mas umas ideias pra vc investigar:

Cada pagina nova carregada no iframe teria que disparar um replaceState nesse estilo no documento principal:

history.replaceState({}, "", urlDaPagina);

Ai no documento principal vc sabe se ele navegou atraves do popstate:

window.onpopstate = function() {

}

Algo assim. Mas precisa investigar mais.

To pensando aqui se a navegacao no iframe nao vai atrapalhar esse tracking do historico. Talvez sim. A history api foi feita mais pensando em Ajax sabe

Muito bom Sergio, as idéias para eu investigar é algo muito oportuno para mim, pois me ajuda a entender e aprender o problema e possivelmente alcançar a solução.

Estou investigando bastante e agora tenho conseguido melhorar o foco das pesquisas e assim obter melhores retornos.

Estou com uns exemplos muito bons para analisar que consegui ontem. Tenho a esperança de que juntando esta análise e as suas indicações possa sair algo.

Quanto ao Ajax, eu já ouvi sobre isto. Andei até lendo um livro sobre Ajax esta semana, mas depois eu vi que ele é de 2007 e muita coisa certamente mudou nestes 8 anos. Tenho de ver algo mais atualizado.

Hoje, dia 8 que agora se inicia não vou poder me dedicar a este assunto devido a outro compromisso, mas sábado já retorno para aqui.

Quanto a navegação por link x iframe creio que pode atrapalhar, mas mesmo assim é importante eu investigar para entender o que ocorre.

Espero em breve poder informar aqui que o assunto terá sido resolvido. Vou chegar lá.

Sergio, obrigado pela sua atenção mais uma vez, pois suas informações foram e serão muito importantes pois para aprender e entender, o pontapé inicial ajuda muito pois vence a inércia.

Uma coisa tenho certeza. Pode até demorar mas chegarei a uma solução, pois várias dificuldades em problemas que até então eram desconhecidos ocorreu desta forma. Este é o primeiro que precisei recorrer a um foram e através de você já vieram várias informações que certamente ajudarão a entender o processo.

Darei notícias,

Um forte abraço,

Grato,

Luiz.