Tenho uma página onde ocorre uma task qualquer, só que é necessário finalizar ela, ou todo processo será perdido. Gostaria de mostrar um alert, como o Facebook e outros sites mostram, perguntando ao usuário se deseja sair mesmo dessa página ou permanecer nela.
-
1O facebook, como exemplo, apenas emite o alerta quando o usuário escreve algo nos comentários ou no status e não postou. Isso é para evitar fechar a janela por acidente e perder o que escreveu. É sob esse contexto que vc quer ou é algo geral, independente da situação?– Daniel Omine16/09/2015 às 18:39
-
Exato, nesse contexto mesmo.– Mateus Carvalho16/09/2015 às 18:40
-
É possível fazer isso pro f5?– Dr.G23/02/2018 às 2:48
3 Respostas
Use o window.onbeforeunload
Html:
<textarea id="comentario"></textarea>
<a href="">Sair da página</a>
Javascript:
window.onbeforeunload = confirmExit;
function confirmExit()
{
if(document.getElementById("comentario").value != ""){
return "Deseja realmente sair desta página?";
}
}
Link do exemplo funcionando: JsFiddle
-
+1, mas com este código ele dá o alert mesmo quando é clicado no botão pra enviar o formulário... acho que o ap vai ter o mesmo problema... tem como colocar esta exceção?– gustavox16/09/2015 às 19:51
-
1Você precisa só adaptar a sua lógica dentro da função, esse é apenas um exemplo, vou editar e adicionar um exemplo. 16/09/2015 às 21:00
-
1é a tal lógica que falta... do que jeito que postou é como uma resposta incompleta. Não está errado, mas está incompleto pois há um contexto específico. 16/09/2015 às 21:02
-
1
-
Sob o contexto de que o alerta deve ser exibido caso o usuário tenha um campo preenchido, segue abaixo um exemplo funcional com JQuery:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind("beforeunload", function() {
console.log("length", $("#foo").val().length);
if ($("#foo").val().length > 0)
return "Do you really want to close?";
})
</script>
</head>
<body>
<input id="foo" type="text" value="" size="50" />
</body>
</html>
A pergunta não especifica o não uso de bibliotecas, por isso utilizei JQuery.
Coloque esse script na sua página e teste:
<script language="JavaScript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "Se você fechar o navegador, seus dados serão perdidos. Desena Realmente sair?";
}
</script>