Atualização (2017)
Agora, os navegadores modernos consideram a exibição de uma mensagem personalizada um risco à segurança e, portanto, foi removida de todos eles. Os navegadores agora exibem apenas mensagens genéricas. Como não precisamos mais nos preocupar em definir a mensagem, é tão simples quanto:
// Enable navigation prompt
window.onbeforeunload = function() {
return true;
};
// Remove navigation prompt
window.onbeforeunload = null;
Leia abaixo para obter suporte ao navegador herdado.
Atualização (2013)
A resposta original é adequada para IE6-8 e FX1-3.5 (que é o nosso objetivo em 2009 quando foi escrita), mas está desatualizada agora e não funcionará nos navegadores mais atuais - deixei abaixo para referência.
O window.onbeforeunload
não é tratado de forma consistente por todos os navegadores. Deve ser uma referência de função e não uma string (como a resposta original afirmou), mas funcionará em navegadores mais antigos, porque a verificação para a maioria deles parece ser se alguma coisa está atribuída onbeforeunload
(incluindo uma função que retorna null
).
Você define window.onbeforeunload
uma referência de função, mas em navegadores antigos, você deve definir returnValue
o evento em vez de retornar uma string:
var confirmOnPageExit = function (e)
{
// If we haven't been passed the event get the window.event
e = e || window.event;
var message = 'Any text will block the navigation and display a prompt';
// For IE6-8 and Firefox prior to version 4
if (e)
{
e.returnValue = message;
}
// For Chrome, Safari, IE8+ and Opera 12+
return message;
};
Você não pode confirmOnPageExit
fazer isso , verifique e retorne nulo se desejar que o usuário continue sem a mensagem. Você ainda precisa remover o evento para ativá-lo e desativá-lo com segurança:
// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;
// Turn it off - remove the function entirely
window.onbeforeunload = null;
Resposta original (trabalhada em 2009)
Para ligar:
window.onbeforeunload = "Are you sure you want to leave?";
Para desativá-lo:
window.onbeforeunload = null;
Lembre-se de que este não é um evento normal - você não pode se vincular a ele da maneira padrão.
Para verificar valores? Isso depende da sua estrutura de validação.
No jQuery, isso pode ser algo como (exemplo muito básico):
$('input').change(function() {
if( $(this).val() != "" )
window.onbeforeunload = "Are you sure you want to leave?";
});