Comment empêcher la fermeture de la fenêtre du navigateur?

J’ai essayé le code suivant pour obtenir une alerte lors de la fermeture d’une fenêtre de navigateur:

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?"; }

Cela fonctionne, mais si la page contient un hyperlien, cliquer sur cet hyperlien déclenche la même alerte. Je dois afficher l’alerte uniquement lorsque je ferme la fenêtre du navigateur et non en cliquant sur des hyperliens.

Gardez votre code tel quel et utilisez jQuery pour gérer les liens:

 $(function () { $("a").click(function { window.onbeforeunload = null; }); });

Une autre implémentation est la suivante, vous pouvez le trouver dans cette page Web: http://ujap.de/index.php/view/JavascriptCloseHook

       external link  internal link, un-hooked

Qu’est-ce qu’il fait, vous utilisez une variable comme indicateur.

Vous pouvez détecter les clics sur les hyperliens, mais vous ne pouvez pas déterminer si l’utilisateur:

Vous avez tenté de rafraîchir la page.
Vous avez tenté de fermer l’onglet du navigateur.
Vous avez tenté de fermer la fenêtre du navigateur.
Entré une autre URL dans la barre d’URL et appuyez sur Entrée.

Toutes ces actions génèrent un événement beforeunload sur la window , sans aucune information plus précise sur l’événement.

Pour afficher la boîte de dialog de confirmation lors des actions ci-dessus et ne pas l’afficher lors d’un clic sur un lien hypertexte, procédez comme suit:

Affectez l’écouteur d’événement beforeunload à la window , qui renvoie le texte de confirmation sous forme de chaîne, sauf si une variable spécifique (indicateur) est définie sur true .
Atsortingbuer un événement de click au document . Vérifiez si a élément a été cliqué ( event.target.tagName ). Si oui, définissez l’indicateur sur true .

Vous devez également gérer les envois de formulaires en affectant un écouteur d’envoi d’événements à un document .

Votre code pourrait ressembler à ceci:

 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; });

 google.com
 
 Try clicking the link or the submit button. The confirmation dialog won't be displayed.
 Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.