Question

您能否通过jquery为我提供检测所有浏览器的仅关闭窗口关闭事件的最佳方式？

我的意思是点击浏览器或window.close（）上的X按钮，而不是F5，表单提交， window.location或链接。我正在寻找许多线程，但没有找到正确的方法。

非常感谢您的支持。

Answer 1

您可以使用：

$(window).unload(function() {
    //do something
}

在jQuery 1.8版中不推荐使用Unload（），所以如果你使用jQuery＆gt; 1.8你甚至可以在使用之前使用。

只要用户因任何原因离开您的网页，就会触发beforeunload事件。

$(window).on("beforeunload", function() { 
    return confirm("Do you really want to close?"); 
})

来源Browser window close event

Answer 2

没有捕获浏览器关闭事件的特定事件。

您只能在卸载当前页面时捕获。

通过这种方法，它将在刷新/导航当前页面时生效。

即使计算鼠标事件的X Y位置也不会给你带来好结果。

Answer 3

在jQuery 1.8版中不推荐使用unload（）方法。

因此，如果您使用的是早于1.8的版本

然后使用 -

$(window).unload(function(){
alert("Goodbye!");
});

如果您使用1.8及更高版本

然后使用 -

window.onbeforeunload = function() {
    return "Bye now!";
};

希望这会奏效： - ）

Answer 4

没有捕获浏览器关闭事件的特定事件。但我们可以通过浏览器位置检测XY。

<script type="text/javascript">
$(document).ready(function() {
  $(document).mousemove(function(e) {
    if(e.pageY <= 5)
    {
        //this condition would occur when the user brings their cursor on address bar 
        //do something here 
    }
  });
});
</script>

Answer 5

合并mousemove和window.onbeforeunload事件： - 我用于设置TimeOut for Audit Table。

 $(document).ready(function () {
 var checkCloseX = 0;
        $(document).mousemove(function (e) {
            if (e.pageY <= 5) {
                checkCloseX = 1;
            }
            else { checkCloseX = 0; }
        });

        window.onbeforeunload = function (event) {
            if (event) {
                if (checkCloseX == 1) {

                    //alert('1111');
                    $.ajax({
                        type: "GET",
                        url: "Account/SetAuditHeaderTimeOut",
                        dataType: "json",
                        success: function (result) {
                            if (result != null) {
                            }
                        }
                    });
                }
            }
        };
  });

Answer 6

您可以使用Vanilla-Js解决此问题：

卸载基础

如果您要提示或警告用户他们将要关闭页面，则需要添加在.returnValue事件上设置beforeunload的代码：

    window.addEventListener('beforeunload', (event) => {
      event.returnValue = `Are you sure you want to leave?`;
    });

有两件事要记住。

大多数现代浏览器（Chrome 51 +，Safari 9.1+等）将忽略您所说的内容，而只是显示一条通用消息。这样可以防止网页作者编写令人震惊的消息，例如“关闭此选项卡会使您的计算机爆炸！?”。
不能保证显示提示。就像playing audio on the web一样，如果用户未与您的页面进行交互，浏览器可以忽略您的请求。作为用户，想象一下打开和关闭一个您永远不会切换到的选项卡-后台选项卡应该不能够提示您它正在关闭。

可选显示

您可以添加一个简单的条件来控制是否通过检查事件处理程序中的内容来提示用户。这是相当基本的好习惯，如果您只是想警告用户他们还没有完成填写单个静态表单，它可能会很好地工作。例如：

    let formChanged = false;
    myForm.addEventListener('change', () => formChanged = true);
    window.addEventListener('beforeunload', (event) => {
      if (formChanged) {
        event.returnValue = 'You have unfinished changes!';
      }
    });

但是，如果您的网页或webapp相当复杂，则此类检查可能会变得笨拙。当然，您可以添加越来越多的检查，但是良好的抽象层可以为您提供帮助并获得其他好处，我将在以后介绍。 ?‍♀️

承诺

因此，让我们围绕Promise对象构建一个抽象层，该对象代表工作的未来结果，就像来自网络fetch()的响应一样。

教导人们的传统承诺是将它们视为单个操作，可能需要几个步骤-从服务器获取，更新DOM，保存到数据库。但是，通过共享Promise，其他代码可以利用它来监视结束时间。

待处理

这是跟踪未完成工作的一个示例。通过使用addToPendingWork调用Promise（例如，从fetch()返回的电话），我们将控制是否警告用户他们将要卸载您的页面。

    const pendingOps = new Set();

    window.addEventListener('beforeunload', (event) => {
      if (pendingOps.size) {
        event.returnValue = 'There is pending work. Sure you want to leave?';
      }
    });

    function addToPendingWork(promise) {
      pendingOps.add(promise);
      const cleanup = () => pendingOps.delete(promise);
      promise.then(cleanup).catch(cleanup);
    }

现在，您需要做的只是在诺言上致电addToPendingWork(p)，也许是从fetch()返回的诺言。这对于网络操作非常有效，并且这样-它们自然会返回Promise，因为您被阻止在网页无法控制的范围内。

更多详细信息可以在此URL中查看：

https://dev.to/chromiumdev/sure-you-want-to-leavebrowser-beforeunload-event-4eg5

希望可以解决您的问题。

通过Jquery检测关闭窗口事件

6 个答案:

卸载基础

可选显示

承诺

待处理