web-dev-qa-db-ger.com

Wie kann ich verhindern, dass das Browserfenster geschlossen wird?

Ich habe den folgenden Code ausprobiert, um beim Schließen eines Browserfensters eine Warnung zu erhalten:

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

Es funktioniert, aber wenn die Seite einen Hyperlink enthält, wird durch Klicken auf diesen Hyperlink die gleiche Warnung ausgelöst. Ich muss die Warnung nur anzeigen, wenn ich das Browserfenster schließe und nicht, wenn ich auf Hyperlinks klicke.

javascriptbrowserwindowonbeforeunload
52
user42348

Behalten Sie Ihren Code bei und verwenden Sie jQuery, um mit Links umzugehen:

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

Eine andere Implementierung ist die folgende, die Sie auf dieser Webseite finden können: 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>

Sie verwenden eine Variable als Flag.

45
netadictos

Sie können Hyperlink-Klicks erkennen, aber nicht feststellen, ob Benutzer:

  • Es wurde versucht, die Seite zu aktualisieren.
  • Es wurde versucht, die Browser-Registerkarte zu schließen.
  • Es wurde versucht, das Browserfenster zu schließen.
  • Geben Sie eine andere URL in die URL-Leiste ein und drücken Sie die Eingabetaste.

Alle diese Aktionen erzeugen ein beforeunload -Ereignis auf window, ohne genauere Informationen über das Ereignis zu haben.

Gehen Sie folgendermaßen vor, um das Bestätigungsdialogfeld anzuzeigen, wenn Sie die obigen Aktionen ausführen, und es nicht anzuzeigen, wenn auf einen Hyperlink geklickt wurde:

  • Weisen Sie beforeunload Ereignis-Listener window zu, wodurch der Bestätigungstext als Zeichenfolge zurückgegeben wird , sofern nicht eine bestimmte Variable ( flag) wird auf true gesetzt.
  • Ordnen Sie click Ereignis document zu. Prüfen Sie, ob das Element a angeklickt wurde (event.target.tagName). Wenn ja, setzen Sie das Flag auf true.

Sie sollten Formularübermittlungen auch bearbeiten, indem Sie submit einen document -Ereignislistener zuweisen.

Ihr Code könnte so aussehen:

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>

Beachten Sie, dass Sie in einigen Browsern event.returnValue In beforeunload Listener und in anderen return Anweisungen verwenden müssen.

Siehe auch beforeunload event docs .

6
Michał Perłakowski