【发布时间】：2013-05-18 10:02:58
【问题描述】：
能否请您给我最好的方法来通过 jQuery 检测 所有浏览器的仅窗口关闭事件？
我的意思是点击浏览器上的X按钮或者window.close()，不是F5的意思，表单提交，
window.location 或链接。
我一直在寻找很多线程，但还没有找到正确的方法。
【问题讨论】：
标签： javascript jquery jquery-events
【发布时间】：2013-05-18 10:02:58
【问题描述】：
你可以使用：
$(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?");
})
【讨论】：
-
嗯，这意味着没有办法检测适用于所有浏览器的窗口关闭事件？感谢您的信息。
-
最佳解决方案我已经搜索过它的工作，我尝试了很多东西，但最适合我的功能是这个
-
它需要在
$(document).ready(function() {})中还是可以在之外？ -
object $(window) 与 $(document) 不同，因此您可以在 document-ready 语句之外使用，但如果您需要将此绑定与文档内的某些内容结合使用，则必须使用 document-准备好了。
没有用于捕获浏览器关闭事件的特定事件。
您只能在卸载当前页面时捕获。
通过此方法，在刷新/导航当前页面时生效。
即使计算鼠标事件的 X Y 位置也不会给你很好的结果。
【讨论】：
unload() 方法在 jQuery 版本 1.8 中已弃用。
所以如果你使用的是 1.8 之前的版本
然后使用 -
$(window).unload(function(){
alert("Goodbye!");
});
如果您使用的是 1.8 及更高版本
然后使用 -
window.onbeforeunload = function() {
return "Bye now!";
};
希望这会奏效:-)
【讨论】：
没有用于捕获浏览器关闭事件的特定事件。但是我们可以通过浏览器位置来检测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>
【讨论】：
-
您好！我编辑了您的帖子以将所有 HTML 都以代码格式放置，因为它被错误地解析为 HTML 标签并且没有被显示。将来，请注意显示您的帖子外观的预览，因为您的答案可能与您的预期大不相同！
结合 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) {
}
}
});
}
}
};
});
【讨论】：
你可以用 vanilla-Js 解决这个问题：
卸载基础知识
如果您想提示或警告您的用户他们将要关闭您的页面，您需要添加在 beforeunload 事件上设置 .returnValue 的代码：
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!';
}
});
但是，如果您的网页或 web 应用程序相当复杂，则此类检查可能会变得笨拙。当然，您可以添加越来越多的检查，但是一个好的抽象层可以帮助您并有其他好处——我稍后会谈到。 ?♀️
承诺
所以，让我们围绕Promise 对象构建一个抽象层，它代表工作的未来结果——就像来自网络fetch() 的响应。
人们学习 promise 的传统方式是将它们视为一个单一的操作，可能需要几个步骤——从服务器获取、更新 DOM、保存到数据库。但是，通过共享Promise，其他代码可以利用它来查看它何时完成。
待定工作
这是一个跟踪待处理工作的示例。通过使用Promise 调用addToPendingWork（例如，从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，因为您在网页无法控制的情况下被阻止。
更多详情可以在这个网址查看：
https://dev.to/chromiumdev/sure-you-want-to-leavebrowser-beforeunload-event-4eg5
希望能解决你的问题。
【讨论】：