javascript - sido - ¿Cómo evitar cerrar la ventana del navegador?
los scripts no pueden cerrar ventanas que no hayan sido abiertas por un script (3)
Guarde su código como está y use jQuery para manejar los enlaces:
$(function () {
$("a").click(function {
window.onbeforeunload = null;
});
});
Probé el siguiente código para obtener una alerta al cerrar una ventana del navegador:
window.onbeforeunload = confirmExit;
function confirmExit() {
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Funciona, pero si la página contiene un hipervínculo, al hacer clic en ese hipervínculo se genera la misma alerta. Necesito mostrar la alerta solo cuando cierro la ventana del navegador y no al hacer clic en hipervínculos.
Otra implementación es la siguiente, puedes encontrarla en esta página web: http://ujap.de/index.php/view/JavascriptCloseHook
<html>
<head>
<script type="text/javascript">
var hook = true;
window.onbeforeunload = function() {
if (hook) {
return "Did you save your stuff?"
}
}
function unhook() {
hook=false;
}
</script>
</head>
<body>
<!-- this will ask for confirmation: -->
<a href="http://google.com">external link</a>
<!-- this will go without asking: -->
<a href="anotherPage.html" onClick="unhook()">internal link, un-hooked</a>
</body>
</html>
Lo que hace es usar una variable como bandera.
Puede detectar clics en hipervínculos, pero no puede determinar si el usuario:
- Intento actualizar la página.
- Intentó cerrar la pestaña del navegador.
- Intentó cerrar la ventana del navegador.
- Ingresó otra URL en la barra de URL y presionó enter.
Todas estas acciones generan el evento beforeunload en la window , sin información más exacta sobre el evento.
Para mostrar el cuadro de diálogo de confirmación al realizar las acciones anteriores y no mostrarlo cuando se hace clic en un hipervínculo, siga estos pasos:
- Asigne
beforeunloadescucha del evento a lawindow, que devuelve el texto de confirmación como una cadena, a menos que una variable específica (indicador) se establezca entrue. - Asignar evento de
clickaldocument. Compruebe si se ha hecho clic enaelemento (event.target.tagName). En caso afirmativo, configure el indicador comotrue.
También debe manejar envíos de formularios asignando un detector de eventos de submit al document .
Tu código podría verse así:
let disableConfirmation = false;
window.addEventListener(''beforeunload'', event => {
const confirmationText = ''Are you sure?'';
if (!disableConfirmation) {
event.returnValue = confirmationText; // Gecko, Trident, Chrome 34+
return confirmationText; // Gecko, WebKit, Chrome <34
} else {
// Set flag back to false, just in case
// user stops loading page after clicking a link.
disableConfirmation = false;
}
});
document.addEventListener(''click'', event => {
if (event.target.tagName.toLowerCase() === ''a'') {
disableConfirmation = true;
}
});
document.addEventListener(''submit'', event => {
disableConfirmation = true;
});
<p><a href="https://stacksnippets.net/">google.com</a></p>
<form action="https://stacksnippets.net/"><button type="submit">Submit</button></form>
<p>Try clicking the link or the submit button. The confirmation dialog won''t be displayed.</p>
<p>Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.</p>
Tenga en cuenta que en algunos navegadores tiene que usar event.returnValue en beforeunload listener, y en otros usa return statement.
Ver también antes de beforeunload documentos de eventos .