javascript - 如何捕获浏览器窗口关闭事件？

Question

我想捕获浏览器窗口/标签关闭事件。我用 jQuery 尝试了以下操作:

jQuery(window).bind(
    "beforeunload", 
    function() { 
        return confirm("Do you really want to close?") 
    }
)

但它也适用于表单提交，这不是我想要的。我想要一个仅在用户关闭窗口时触发的事件。

Answer 1

每当用户出于任何原因离开您的页面时，都会触发 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 事件，因此如果您添加一个新表单，您还需要将处理程序绑定(bind)到它。

请注意，如果不同的事件处理程序取消提交或导航，如果稍后实际关闭窗口，您将丢失确认提示。您可以通过在 submit 和 click 事件中记录时间并检查 beforeunload 是否在几秒钟后发生来解决此问题。