web-dev-qa-db-fra.com

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 lien hypertexte, cliquer sur ce lien hypertexte 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.

javascriptbrowserwindowonbeforeunload
52
user42348

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

$(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});
31
M. Utku ALTINKAYA

Une autre implémentation est la suivante, vous pouvez la trouver sur cette page 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>

Ce qu'il fait, c'est que vous utilisez une variable comme indicateur.

45
netadictos

Vous pouvez détecter les clics sur les liens hypertexte, mais vous ne pouvez pas déterminer si l'utilisateur:

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

Toutes ces actions génèrent beforeunload événement sur window, sans plus d'informations précises sur l'événement.

Afin d'afficher la boîte de dialogue de confirmation lorsque vous effectuez les actions ci-dessus et de ne pas l'afficher lorsqu'un lien hypertexte a été cliqué, procédez comme suit:

  • Affectez beforeunload l'écouteur d'événements à window, qui renvoie le texte de confirmation sous forme de chaîne, à moins que une variable spécifique (indicateur) est défini sur true.
  • Assignez click événement à document. Vérifiez si l'élément a a été cliqué (event.target.tagName). Si oui, définissez l'indicateur sur true.

Vous devez également gérer les soumissions de formulaires en affectant un écouteur d'événement submit à 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;
});
<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>

Notez que dans certains navigateurs, vous devez utiliser event.returnValue dans beforeunload écouteur, et dans d'autres, vous utilisez l'instruction return.

Voir aussi beforeunload documents d'événement .

6
Michał Perłakowski