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