6

Como que eu detecto quando o usuário clica nos botões Voltar/Avançar/Recarregar do Google Chrome?

Eu já fiz um esquema para fazer uma verificação antes do usuário sair da pagina através dos elementos da própria página mas não consigo saber quando ele clica nos botões do próprio navegador.

Aqui está um exemplo do que eu fiz

<script language="javascript" >
    var validNavigation = false;
    var numPendencias = 0;

    function verificaPendencias() {

        var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation
        var leave_message = 'Existem pendências ativas, deseja mesmo sair?'
        //Gera um aviso para o usuário para evitar que saia com pendências ativas
        function goodbye(e) {
            if (!validNavigation) {
                if (dont_confirm_leave!==1) {
                    if(!e) e = window.event;
                    //e.cancelBubble is supported by IE - this will kill the bubbling process.
                    e.cancelBubble = true;
                    e.returnValue = leave_message;
                    //e.stopPropagation works in Firefox.
                    if (e.stopPropagation) {
                        e.stopPropagation();
                        e.preventDefault();
                    }                    
                    //return works for Chrome and Safari
                    return leave_message;
                }
            }
        }

        window.onbeforeunload=goodbye;

    }

    function atribuirEventos() {    
        // Attach the event keypress to exclude the F5 refresh
        jQuery(document).bind('keypress', function(e) {
            if (e.keyCode == 116){
              validNavigation = true;
            }
        });

        jQuery(document).bind('keydown', function(e) {
            if (e.keyCode == 116){
              validNavigation = true;
            }
        });

        jQuery(document).bind('keyup', function(e) {
            if (e.keyCode == 116){
              validNavigation = true;
            }
        });

        //Atribui uma função a todos links na página
        jQuery("a").bind("mouseover", function() {
            validNavigation = true;
        });                
        jQuery("a").bind("mouseout", function() {
            validNavigation = false;
        });

        //Atribui uma função a todos forms na página
        jQuery("form").bind("submit", function() {
            validNavigation = true;
        });

        //Atribui uma função a todos input do tipo submit na página
        // Attach the event click for all inputs in the page
        jQuery("input[type=submit]").bind("click", function() {
            validNavigation = true;
        });

        //Atribui uma função a todos buttons na página
        jQuery("button").bind("mouseover", function() {
            validNavigation = true;            

        });                
        jQuery("button").bind("mouseout", function() {
            validNavigation = false;

        });        
    }

    // Wire up the events as soon as the DOM tree is ready
    jQuery(document).ready(function() {
        verificaPendencias();
        atribuirEventos();
    });    
</script>

27/08 - Para ser mais exato, eu gostaria de gerar um aviso para quando o usuário fechar o navegador ou a aba, mas o problema é que através do onbeforeunload, toda vez que ele clicava em um link, apertava F5 ou fizesse qualquer coisa que sai-se da página em si ele exibia a mensagem, então eu coloquei as travas acima, mas mesmo assim quando o usuário clica nos botões do navegador ele gera a mensagem, eu queria através do método acima evitar isso e deixar a mensagem apenas quando fosse fechada a aba ou o navegador.

3 Respostas 3

3

Basicamente, a resposta é: Isso não é possível!

JavaScript não tem acesso a essas funcionalidades do navegador, logo JavaScript não tem como detectar quando o usuário pressionou o botão de Voltar, Avançar e Reiniciar.

Pelo que percebo, você quer criar um código em JS que impede o usuário de sair da página. E isso não é possível.

JavaScript funciona através de um console/emulador. As estruturas internas do navegador não são acessadas pelo JS.

3
  • 2
    Então, eu to ligado que não tem como evitar mas eu queria pelo menos exibir uma mensagem de alerta, isso eu já consegui fazer, só da forma que eu fiz ta fazendo que com qualquer movimentação que eu faça na página exiba a mensagem, por isso eu fiz aquelas travas acima. Pelo menos eu queria saber se o usuário clicou em qualquer um dos botões independente de qual seja, em outros fóruns me mandaram usar o onpopstate, ele funciona mas ele trava o usuário e não deixa ele voltar nem avançar no histórico. 27/08/2014 às 19:46
  • @brunodotcom Se essa resposta respondeu sua pergunta favor marcar com respondida. 29/08/2014 às 14:44
  • 1
    Na verdade ainda to esperando outra resposta, em outros fóruns eu vi o uso do popstate mas não entendi como aplicar isso 1/09/2014 às 18:24
2

Seguindo a resposta do @RowAraujo não é possível, mas você pode usar o evento refresh.

window.onbeforeunload = function(e) {
  return 'Evento disparado!!';
};

Segue um exemplo: DEMO

2
  • Então, eu uso isso mas ele dispara a todo momento, não apenas quando vai dar o refresh 27/08/2014 às 12:19
  • Esse é o problema, ele irá disparar toda vez que tentar sair da página. 27/08/2014 às 14:23
0

Acho que mesmo o post sendo antigo.... sempre vale a atualização...

Eu achoque eh possivel...

Este pequeno codigo, consegue perceber quando o teclado eh usado, capturando as teclas CTRL+R ou F5 ou BackSpace, e assim decidir como tratar o evento.

Tambem tem uma forma de capturar o evento "Botao Back Do Navegador", mas para isso foi usado o Historico do Navegador. Onde voce tambem pode escolher como tratar o evento. Com este "controle do historico" pode-se inclusive CANCELAR o botao "Back do navegador"....

por favor confiram o codigo abaixo... Ondo a proposta eh aparecer "uma mensagem de aviso" APENAS se for clicado em um favorito, ou digitado um novo endereco na barra de URL... Quando for acionado qualquer tipo de back, reload, ou click em botoes da mesma pagina, nao deve aparecer o "aviso de saida da pagina"

        // para o botao voltar do navegador

detectedBrowser= Qual_Eh_o_Seu_Browser?;

if(detectedBrowser==InternetExplorer){history.pushState( "nohb", null, "URL_Corretaaaaa" );}
else    {history.pushState( "nohb", null, "" );}

window.onpopstate = function(event) {               // JS version
//  $(window).on( "popstate", function(event){          // Jquery version
    console.log('MESSAGE  213 = ' + flag_beforeunload ) 
    if( !event.state ){                             // JS version
//      if( !event.originalEvent.state ){               // Jquery version

            // para desabilitar o botao BACK do navegador, descomente as linhas abaixo:
            //  history.pushState( "nohb", null, "" );
            //  return;

            // para tratar o evento UnBeforeUnload voce tem as linhas abaixo..  modifique conforme sua necessidade... neste exemplo ele so volta uam pagina, sem pop up.
                flag_beforeunload=false;
             window.history.back();


    }
};


//
//escutando o teclado
//

    document.onkeydown = KeyCheck;
    function KeyCheck(e) {
        var key = (window.event) ? event.keyCode : e.keyCode;
        if(key==116) {flag_beforeunload=false;}     
        if(key==8) {flag_beforeunload=false;}       
        if (e.keyCode == 82 && e.ctrlKey) {flag_beforeunload=false;}        
        if(e.keyCode == 91) {flag_beforeunload=false;}      // safari
        if (e.keyCode == 82) {flag_beforeunload=false;}     // safari

        document.getElementById("container").innerHTML = "key = "+key + " - " + flag_beforeunload;
    }



//
// o evento UnBeforeUnload
//
        window.onbeforeunload = function(e){
            var msg = 'Deseja mesmo sair?';
            e = e || window.event;

            if(e)
                if (flag_beforeunload == true) {
                    return msg;
                }
        }

Lembren-se, cada navegador eh diferente... Mas a grosso modo, nos testes que eu fiz... só não funciona no safari...

Ja no FireFox Mozilla e IExplorer, funcionam quase 100% mas, com algumas ressalvas no FireFox...

Continuo pesquisando, se alguém tiver mais dicas e considerações por favor compartilhem! Principalmente porque gostaria de controlar quando o usuário apertar o "botão reload" do navegador.

[]s Sena

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .