Question

我尝试使用以下代码在关闭浏览器窗口时收到提醒：

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

它有效，但如果页面包含一个超链接，则单击该超链接会引发相同的警报。我只有在关闭浏览器窗口而不是单击超链接时才需要显示警报。

Answer 1

您可以在此网页中找到另一个实现： 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>

它的作用是使用变量作为标志。

Answer 2

按原样保存代码并使用jQuery处理链接：

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

Answer 3

您可以检测超链接点击次数，但无法确定是否为用户：

尝试刷新页面。
尝试关闭浏览器标签。
试图关闭浏览器窗口。
在网址栏中输入了另一个网址，然后按Enter键。

所有这些操作都会在beforeunload上生成window个事件，而不会提供有关该事件的更多确切信息。

要在执行上述操作时显示确认对话框，并在单击超链接时不显示，请按照下列步骤操作：

将beforeunload事件监听器分配给window，它将确认文本作为字符串返回，除非特定变量（标志）设置为true。< / LI>
将click个事件分配给document。检查是否已单击a元素（event.target.tagName）。如果是，请将标记设置为true。

您还应该通过为submit分配document事件监听器来处理表单提交。

您的代码可能如下所示：

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>

请注意，在某些浏览器中，您必须在event.returnValue侦听器中使用beforeunload，而在其他浏览器中则使用return语句。

另见beforeunload event docs。

Answer 4

我添加了其他代码，用于处理窗口是否关闭的进一步处理

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

在确认后，如果您要发送任何ajax请求并且您已使用jquery

 $(window).on('unload', function() {
   // async: false will make the AJAX synchronous in case you're using jQuery
   axios
     .get('ajax_url')
     .then(response => {});
 });

如果没有使用jquery，则可以使用导航器，它需要导航器库

navigator.sendBeacon(url, data);

您可以从此处下载该库：https://github.com/miguelmota/Navigator.sendBeacon

如何防止关闭浏览器窗口？

4 个答案: