27

你能给我最好的方法来通过jQuery检测所有浏览器的窗口关闭事件吗？

我的意思是单击X浏览器上的按钮，或者window.close()，不是指F5表单提交 window.location或链接。我一直在寻找很多线程，但还没有找到正确的方法。

4

6 回答 6

41

您可以使用：

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

Unload() 在 jQuery 版本 1.8 中已弃用，因此如果您使用 jQuery > 1.8，您甚至可以使用 beforeunload 代替。

每当用户出于任何原因离开您的页面时，都会触发 beforeunload 事件。

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

源浏览器窗口关闭事件

于 2013-05-23T06:53:21.050 回答
14

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

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

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

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

于 2013-05-23T09:35:57.160 回答
10

unload() 方法在 jQuery 版本 1.8 中已弃用。

因此，如果您使用的是 1.8 之前的版本

然后使用 -

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

如果您使用的是 1.8 或更高版本

然后使用 -

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

希望这会奏效:-)

于 2013-12-06T07:35:58.783 回答
6

没有用于捕获浏览器关闭事件的特定事件。但是我们可以通过浏览器的位置来检测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>
于 2015-07-23T06:03:25.830 回答
3

结合 mousemove 和 window.onbeforeunload 事件：- 我用于设置审核表的超时。

 $(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) {
                            }
                        }
                    });
                }
            }
        };
  });
于 2016-05-13T08:40:09.393 回答
2

你可以用 vanilla-Js 解决这个问题：

卸载基础

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

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

有两件事要记住。

  1. 大多数现代浏览器（Chrome 51+、Safari 9.1+ 等）会忽略您所说的内容，只显示一般性消息。这可以防止网页作者写出令人震惊的消息，例如，“关闭此选项卡将使您的计算机爆炸！”。

  2. 不能保证显示提示。就像在网络上播放音频一样，如果用户没有与您的页面进行交互，浏览器可以忽略您的请求。作为用户，想象一下打开和关闭一个您从不切换到的选项卡——后台选项卡应该无法提示您它正在关闭。

可选择显示

您可以添加一个简单的条件来控制是否通过检查事件处理程序中的某些内容来提示您的用户。这是相当基本的良好做法，如果您只是试图警告用户他们尚未完成单个静态表单的填写，则可以很好地工作。例如：

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

但是，如果您的网页或 web 应用程序相当复杂，那么这些检查可能会变得笨拙。当然，您可以添加越来越多的检查，但是一个好的抽象层可以帮助您并有其他好处——我稍后会谈到。‍♀️</p>

承诺

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

人们学习 promise 的传统方式是将它们视为一个单独的操作，可能需要几个步骤——从服务器获取、更新 DOM、保存到数据库。但是，通过共享Promise，其他代码可以利用它来观察它何时完成。

待处理的工作

这是一个跟踪待处理工作的示例。通过调用——例如，返回addToPendingWork的——我们将控制是否警告用户他们将要卸载您的页面。Promisefetch()

    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(). 这适用于网络操作，它们自然会返回 a Promise，因为您被网页无法控制的内容所阻止。

更多细节可以在这个网址中查看：

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

希望能解决你的问题。

于 2019-11-26T10:21:58.573 回答