JavaScript ou jQuery browser back button click detector

Alguém poderia por favor compartilhar experiência / código como podemos detectar o clique do botão voltar do navegador (para qualquer tipo de navegador)?

Precisamos atender a todos os navegadores que não suportam HTML5

O evento ‘popstate’ só funciona quando você pressiona algo antes. Então você tem que fazer algo assim:

jQuery(document).ready(function($) { if (window.history && window.history.pushState) { window.history.pushState('forward', null, './#forward'); $(window).on('popstate', function() { alert('Back button was pressed.'); }); } }); 

Para compatibilidade com versões anteriores do navegador, eu recomendo: history.js

Há muitas maneiras de detectar se o usuário clicou no botão Voltar. Mas tudo depende do que você precisa. Tente explorar links abaixo, eles devem ajudá-lo.

Detectar se o usuário pressionou o botão “Voltar” na página atual:

  • Existe uma maneira de usar o jQuery para detectar o botão Voltar sendo pressionado navegadores cruzados
  • detectar botão de volta clique no navegador

Detectar se a página atual é visitada depois de pressionar o botão “Voltar” na página anterior (“Avançar”):

  • Existe um evento onload entre navegadores ao clicar no botão Voltar?
  • evento de acionador no clique do botão Voltar do navegador

Achei isso para funcionar bem cross browser e mobile back_button_override.js .

(Adicionado um timer para o safari 5.0)

 // managage back button click (and backspace) var count = 0; // needed for safari window.onload = function () { if (typeof history.pushState === "function") { history.pushState("back", null, null); window.onpopstate = function () { history.pushState('back', null, null); if(count == 1){window.location = 'your url';} }; } } setTimeout(function(){count = 1;},200); 

Você pode usar este incrível plugin

https://github.com/ianrogren/jquery-backDetect

Tudo que você precisa fazer é escrever este código

  $(window).load(function(){ $('body').backDetect(function(){ // Callback function alert("Look forward to the future, not the past!"); }); }); 

Melhor

Está disponível na API de histórico do HTML5. O evento é chamado de 'popstate'

Desativar o botão de URL, seguindo a function

 window.onload = function () { if (typeof history.pushState === "function") { history.pushState("jibberish", null, null); window.onpopstate = function () { history.pushState('newjibberish', null, null); // Handle the back (or forward) buttons here // Will NOT handle refresh, use onbeforeunload for this. }; } else { var ignoreHashChange = true; window.onhashchange = function () { if (!ignoreHashChange) { ignoreHashChange = true; window.location.hash = Math.random(); // Detect and redirect change here // Works in older FF and IE9 // * it does mess with your hash symbol (anchor?) pound sign // delimiter on the end of the URL } else { ignoreHashChange = false; } }; } }; 

No meu caso, estou usando o jQuery .load() para atualizar os DIVs em um SPA (aplicativo [web] de página única) .

Sendo $(window).on('hashchange', ..) trabalhar com o ouvinte de events $(window).on('hashchange', ..) , este se mostrou desafiador e demorou um pouco para ser usado. Graças a ler muitas respostas e tentar diferentes variações, finalmente descobri como fazê-lo funcionar da seguinte maneira. Até onde eu sei, está parecendo estável até agora.

Em resumo – há a variável globalCurrentHash que deve ser configurada toda vez que você carregar uma visão.

Então, quando o ouvinte de evento $(window).on('hashchange', ..) é executado, ele verifica o seguinte:

  • Se location.hash tiver o mesmo valor, significa Avançar
  • Se location.hash tiver um valor diferente, isso significa voltar

Eu percebo que usar o global vars não é a solução mais elegante, mas fazer coisas OO em JS parece complicado para mim até agora. Sugestões para melhoria / refinamento certamente apreciado


Configuração:

  1. Definir um var global:
  var globalCurrentHash = null; 
  1. Ao chamar .load() para atualizar o DIV, atualize também o global var:

     function loadMenuSelection(hrefVal) { $('#layout_main').load(nextView); globalCurrentHash = hrefVal; } 
  2. Na página pronta, configure o ouvinte para verificar o var global para ver se o botão Voltar está sendo pressionado:

     $(document).ready(function(){ $(window).on('hashchange', function(){ console.log( 'location.hash: ' + location.hash ); console.log( 'globalCurrentHash: ' + globalCurrentHash ); if (location.hash == globalCurrentHash) { console.log( 'Going fwd' ); } else { console.log( 'Going Back' ); loadMenuSelection(location.hash); } }); }); 

No caso de HTML5, isso fará o truque

 window.onpopstate = function() { alert("clicked back button"); }; history.pushState({}, ''); 

suponha que você tenha um botão:

  

Aqui o código do método backBtn:

  function backBtn(){ parent.history.back(); return false; }