我想捕获浏览器窗口/选项卡关闭事件。我用 jQuery 尝试了以下操作：
jQuery(window).bind(
"beforeunload",
function() {
return confirm("Do you really want to close?")
}
)
但它也适用于表单提交，这不是我想要的。我想要一个仅在用户关闭窗口时触发的事件。
如何捕获浏览器窗口关闭事件？
IT技术
javascript
jquery
events
browser
2021-01-25 06:19:42
6个回答
beforeunload只要用户出于任何原因离开您的页面，就会触发该事件。
例如，如果用户提交表单、单击链接、关闭窗口（或选项卡）或使用地址栏、搜索框或书签进入新页面，它将被触发。
您可以使用以下代码排除表单提交和超链接（其他框架除外）：
var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
对于早于 1.7 的 jQuery 版本，试试这个：
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
该live方法不适用于该submit事件，因此如果您添加一个新表单，您还需要将处理程序绑定到它。
请注意，如果不同的事件处理程序取消提交或导航，那么如果窗口稍后实际关闭，您将失去确认提示。您可以通过在submit和click事件中记录时间并检查是否在beforeunload几秒钟后发生来解决该问题。
也许只是beforeunload在表单的submit事件处理程序中解除绑定事件处理程序：
jQuery('form').submit(function() {
jQuery(window).unbind("beforeunload");
...
});
对于跨浏览器解决方案（在 Chrome 21、IE9、FF15 中测试），请考虑使用以下代码，这是 Slaks 代码的略微调整版本：
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind('beforeunload', function(eventObject) {
var returnValue = undefined;
if (! inFormOrLink) {
returnValue = "Do you really want to close?";
}
eventObject.returnValue = returnValue;
return returnValue;
});
请注意，从 Firefox 4 开始，消息“您真的要关闭吗？” 不显示。FF 仅显示通用消息。请参阅https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload 中的注释
window.onbeforeunload = function () {
return "Do you really want to close?";
};
我的回答旨在提供简单的基准。
如何
请参阅@SLaks 答案。
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})
浏览器需要多长时间才能最终关闭您的页面？
每当用户关闭页面（x按钮或CTRL+ W）时，浏览器都会执行给定的beforeunload代码，但不会无限期地执行。唯一的例外是确认框 ( return 'Do you really want to close?)，它将等待用户的响应。
铬：2 秒。
Firefox：∞（或双击，或强制关闭）
Edge：∞（或双击）
Explorer 11：0 秒。
Safari :待办事项
我们用来测试的内容：
- 带有请求日志的 Node.js Express 服务器
- 以下简短的 HTML 文件
它所做的是在浏览器关闭其页面（同步）之前发送尽可能多的请求。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function request() {
return $.ajax({
type: "GET",
url: "http://localhost:3030/" + Date.now(),
async: true
}).responseText;
}
window.onbeforeunload = () => {
while (true) {
request();
}
return null;
}
</script>
</body>
</html>
铬输出：
GET /1480451321041 404 0.389 ms - 32
GET /1480451321052 404 0.219 ms - 32
...
GET /hello/1480451322998 404 0.328 ms - 32
1957ms ≈ 2 seconds // we assume it's 2 seconds since requests can take few milliseconds to be sent.
其它你可能感兴趣的问题