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

Il fonctionne, mais si la page contient un lien hypertexte, en cliquant sur cet hyperlien pose la même alerte. J'ai besoin d'afficher l'alerte que lorsque je ferme la fenêtre du navigateur et non pas en cliquant sur les hyperliens.

  • Voté pour la réouverture. La duplication liée ne pas répondre à la question, mais les réponses sont ici.
  • FWIW, je viendrai vous poignarder dans le petit orteil si vous mettez ce comportement dans n'importe quelle application que j'ai à utiliser. Le détournement de navigateur est un godawful solution à ce problème. Ne pouvez-vous pas simplement utiliser de l'AJAX ou quelque chose et auto-enregistrer leur état?
  • Je suis en désaccord avec Graham-parfois une alerte de confirmation est tout ce dont vous avez besoin. Accordé ce peut être (et est souvent abusé par les sites d'essayer de vous empêcher de partir, mais ils sont utilisés adéquatement, il peut être beaucoup apprécié, par exemple, si vous oubliez de poster quelque chose.
  • Vous aurez toujours des problèmes si vous voulez vous rafraîchir la page, même si vous désactivez le point d'ancrage des événements.
InformationsquelleAutor user42348 | 2008-12-02
  1. 30

    Garder votre code est et utiliser jQuery pour gérer les liens:

    $(function () {
  $("a").click(function {
    window.onbeforeunload = null;
  });
});
    • Cela fonctionne, si l'ouverture de la fenêtre enfant est dans un autre domaine?
    • oui sa fonctionne pour les liens mais s'il vous plaît donner une solution pour quand nous rafraîchir le navigateur de la fenêtre.onbeforeunload événement déclencheur comment pouvons-nous nous arrêter triggring l'événement sur l'actualisation d'une page ou en appuyant sur la touche retour avez-vous une idée à propos de ce
    • Il n'y a pas de jQuery tag pour cette question.
    • ajouté jQuery balise de grâce.
    • Que voulez-vous dire? Cette question n'a toujours pas de jQuery tag.
    • il voulait dire qu'il n'y a pas de jQuery tag sur la question, et donc vous ne devriez pas avoir répondu avec jQuery solution. Vanille javascript aurait été préférable.

    InformationsquelleAutor M. Utku ALTINKAYA
  2. 45

    Une autre application est la suivante, vous pouvez le trouver dans cette page:
    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'elle fait est que vous utilisez une variable comme un drapeau.

    • +1 parce qu'elle est plus générale et solution accessible. Supposons que j'ai un script portion qui fait que la page de redirection, donc avant l'application de l'action de redirection, j'ai juste mis hook = false. Checkout cette DÉMO
    • En fonction de votre solution, je propose que si vous utilisez jQuery, utiliser une classe comme .noConfirm et faire quelque chose comme: $('.noConfirm').cliquez sur(décrocher)
    • Je vous recommande de mettre à jour votre réponse à l'utilisation plus moderne .addEventListener() au lieu de onclick attribut (ou .onbeforeunload = ...).
    • Je vous recommande de ne pas utiliser la méthode addEventListener depuis onclick fonctionne dans tous les navigateurs. Vous pouvez toujours affecter onclick discrètement
    • En fait, addEventListener travaux dans tous les navigateurs. Si vous pensez que IE <= 8 est un navigateur trop, vous pouvez utiliser attachEvent méthode, qui a pratiquement les mêmes fonctionnalités.
    • Oui - nous avons besoin de soutien IE8 et pourquoi s'embêter avec deux gestionnaires d'événements lorsque onclick fonctionne dans tous les JS activé navigateurs
    • Est-il possible d'écrire mon propre code javascript au lieu de seulement la boîte de confirmation.

    InformationsquelleAutor netadictos
  3. 6

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

    • Tenté de rafraîchir la page.
    • Tenté de fermer des onglets du navigateur.
    • Tenté de fermer la fenêtre du navigateur.
    • Saisi une autre URL dans la barre d'adresse et appuyez sur entrée.

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

    Afin d'afficher la boîte de dialogue de confirmation lorsque vous faites des actions ci-dessus, et de ne pas l'afficher lorsqu'un lien hypertexte a été cliqué, suivez ces étapes:

    • Attribuer beforeunload écouteur d'événement à window, qui retourne le texte de confirmation comme une chaîne de caractères, sauf une variable spécifique (flag) est mis à true.
    • Attribuer click événement à document. Vérifier si a élément a été cliqué (event.target.tagName). Si oui, définir le drapeau à true.

    Vous devez également gérer les soumissions de formulaires par l'affectation d'un submit écouteur d'événement à document.

    Votre code pourrait ressembler à ceci:

    JS:

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

    HTML:

    <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>

    Noter que dans certains navigateurs, vous devez utiliser event.returnValue dans beforeunload à l'écoute, et dans d'autres, vous utilisez return déclaration.

    Voir aussi beforeunload événement docs.

    InformationsquelleAutor Michał Perłakowski