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

Question

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.

50

browser javascript onbeforeunload window

demandé sur Paolo Forgia 2008-12-02 14:14:48

3 réponses

score 29 · Answer 1

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

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

score 45 · Answer 2

Une autre implémentation est la suivante vous pouvez la trouver dans 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.

score 6 · Answer 3

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

tentative d'actualisation de la page.
tentative de fermeture de l'onglet du navigateur.
tentative de fermeture de la fenêtre du navigateur.
entré une autre URL dans la barre D'URL et appuyez sur Entrée.

Toutes ces actions générer beforeunload événement window, sans renseignements plus précis sur l'événement.

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

affectez beforeunload l'écouteur d'événement à window, qui renvoie le texte de confirmation sous forme de chaîne, sauf si une variable spécifique (indicateur) est définie sur true.
attribuez l'événement click à 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 formulaire en affectant un écouteur d'événement submit à document.

Votre code pourrait ressembler à ce:

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 auditeur, et dans d'autres, vous utilisez return déclaration.

Voir aussi beforeunload documents d'événements .

Las etiquetas más populares

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

3 réponses