JavaScript antes de sair da página

234

Quero fazer uma confirmação antes de o usuário sair da página. Se ele disser ok, será redirecionado para uma nova página ou cancelado para sair. Eu tentei fazê-lo com onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Mas confirmar depois da página já fechada? Como fazer isso corretamente?

Seria ainda melhor se alguém mostrasse como fazer isso com o jQuery?

javascript jquery kd7
fonte
1
ha ha ha ... Sim, isso é bastante right..but felizmente não meu site ... meu cliente pedindo para fazê-lo em seu lado
KD7
25
Sim, mas estou muito feliz em ver esses alertas quando estou prestes a sair de uma página do Gmail não salva.
precisa saber é o seguinte
Observe que, no Firefox 4+, apenas uma mensagem padrão é exibida em vez da sua mensagem personalizada developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes
baptx
4
Possível duplicada do usuário Avisar antes de sair da página da Web com alterações não salvas
Wasim A.

Respostas:

352

onunload(ou onbeforeunload) não pode redirecionar o usuário para outra página. Isto é por razões de segurança.

Se você deseja mostrar um aviso antes que o usuário saia da página, use onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Ou com jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Isso apenas perguntará ao usuário se ele deseja sair da página ou não; não será possível redirecioná-lo se ele optar por permanecer na página. Se eles optarem por sair, o navegador irá para onde eles disseram.

Você pode onunloadfazer as coisas antes que a página seja descarregada, mas não pode redirecionar a partir daí (o Chrome 14+ bloqueia os alertas internos onunload):

window.onunload = function() {
    alert('Bye.');
}

Ou com jQuery:

$(window).unload(function(){
  alert('Bye.');
});
Foguete Hazmat
fonte
12
@ Joseph: Quando você retorna uma string onbeforeunload, o navegador coloca essa string em sua própria caixa de confirmação. O uso confirmé inútil onunloade onbeforeunload, porque apenas o navegador pode controlar para onde vai, não você. Confira esta demonstração: jsfiddle.net/3kvAC
Rocket Hazmat
7
Apenas uma observação, se você desejar exibir uma mensagem condicionalmente onbeforeunload, return falsefará com que o navegador mostre "falso" em uma caixa de diálogo. Você precisa return undefinedse quiser deixar a janela fechar sem nenhum alerta do usuário.
9114 Dan Fitch
5
@ Adam: O Firefox decidiu proibir a personalização dessa mensagem. Isso faz parte do navegador, então você não pode substituir esse comportamento. Outros navegadores também podem estar removendo a capacidade de personalizar a mensagem. Veja: developer.mozilla.org/pt-BR/docs/Web/API/WindowEventHandlers/…
Rocket Hazmat
8
O @RocketHazmat Chrome também. Agora, apenas diz: Deseja sair deste site? As alterações feitas podem não ser salvas.
programmer5000
6
@ programmer5000 É bom porque alguns sites mal-intencionados podem mostrar alguns avisos inúteis (por exemplo, "Você não pode sair sem fornecer informações bancárias")
Naman
34

Este código quando você também detecta o estado do formulário foi alterado ou não.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Você pode usar a função Serializar formulário do Google JQuery, que coletará todas as entradas do formulário e as salvará na matriz. Eu acho que essa explicação é suficiente :)

Wasim A.
fonte
alguma idéia de por que isso não funcionaria? Poderia ser substituído por outros plug-ins de funções / js js? Estou executando um aplicativo webrtc e gostaria de "fechar" algumas coisas quando o cliente fecha a janela, portanto, é necessário lidar com o fechamento da janela.
hey
1
isso pode ser sobrescrito por qualquer outro plug-in, etc.
Wasim A.
Sim ... se você tiver algum código JS que oculte ou desabilite os campos de entrada após o carregamento da página, quando você fizer a verificação para comparar os campos ocultos \ desativados, não será serializado. A verificação falhará, é claro. ;) Existe esta solução alternativa: stackoverflow.com/a/4748748/114029
Leniel Maccaferri
By the way ... há uma maneira melhor aqui: stackoverflow.com/q/16322042/114029
Leniel Maccaferri
1
Observe que isso também gerará um aviso ao pressionar o botão enviar. pode-se serializar o formulário novamente ao clicar no botão enviar para evitar isso.
Adam
19

Isso alertará ao sair da página atual

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>
Ajit Singh
fonte
14

Foi o que fiz para mostrar a mensagem de confirmação apenas quando tenho dados não salvos

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

retornar "indefinido" desativará a confirmação

Nota: retornar "null" não funcionará com o IE

Além disso, você pode usar "undefined" para desativar a confirmação

window.onbeforeunload = undefined;
Mina Matta
fonte
11

Para ter um pop-up com o Chrome 14 ou superior, você precisa fazer o seguinte:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

O usuário será perguntado se ele quer ficar ou sair.

David Bélanger
fonte
Alguma idéia de por que isso não está funcionando? Estou usando o chrome (versão mais recente) junto com um monte de plugins jquery, mas não recebo nenhum alerta quando fecho a janela.
hey
@hey Por que o voto negativo? Está funcionando ... Você precisa se certificar de que está fora do jQuery(document)e sugiro corrigi-lo após todos os seus plugins serem carregados. Além disso, este trecho não envia nenhum alerta ... é apenas uma demonstração return.
David Bélanger
7

Você pode usar a seguinte linha única para sempre perguntar ao usuário antes de sair da página.

window.onbeforeunload = s => "";

Para perguntar ao usuário quando algo na página foi modificado, consulte esta resposta .

spencer.sm
fonte
isso também dispara se eu atualizar a página ou simplesmente sair?
precisa saber é
Sim, ele será acionado em uma atualização ou saída.
Spencer.sm
Existe alguma maneira de saber quando é a atualização vs quando é a primeira vez?
Si8 13/01/19
Quando um usuário chega à página pela primeira vez, em vez de atualizar a página.
precisa saber é o seguinte
Ah não. Não será acionado quando um usuário chegar à página pela primeira vez. Somente ao fechar ou alterar as páginas ou atualizar.
Spencer.sm
4

Normalmente você deseja mostrar esta mensagem quando o usuário fez alterações em um formulário, mas elas não são salvas.

Siga essa abordagem para mostrar uma mensagem, somente quando o usuário tiver alterado algo

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}
Simon Franzen
fonte
3 
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Emir Mamashov
fonte
2

A maioria das soluções aqui não funcionou para mim, então usei a encontrada aqui

Também adicionei uma variável para permitir ou não a caixa de confirmação

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});
Raj Sharma
fonte
1

Um pouco mais útil, ative e desative

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
l2aelba
fonte