用户切换浏览器选项卡时的事件答案

【问题标题】：Event for when user switches browser tabs用户切换浏览器选项卡时的事件
【发布时间】：2010-11-05 12:51:27
【问题描述】：

我正在寻找一个在用户从页面切换到另一个选项卡时触发的事件，以及在用户再次切换回该选项卡时触发的另一个事件。

window.onblur 和 window.onfocus don't seem to work correctly 跨所有浏览器

是否有我可以查看的代理来合成此事件？

【问题讨论】：

我很确定这是不可能的，至少在所有浏览器中都是这样。
其实跨浏览器兼容does not seem that bad。你会在 Firefox 和 Safari/Windows 中获得一些双倍的事件，但这应该很容易解决。 window.onfocus/onblur 在浏览器大战之前就已经可用，并且它们的行为没有太大变化。显然在实现中存在一些错误，但没有不同的语义。
很多时候我使用自动滚动（鼠标中键）（至少在 Windows 上）和很多复制粘贴脚本小子（不确定它是否是 window.onblur 副手）会触发令人讨厌的电子邮件订阅模式。任何值得他们重视的开发人员都应该进行测试，以确保他们不会惹恼他们的用户。

标签： javascript cross-browser

【解决方案1】：

您也可以尝试使用VisibilityAPI。

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        console.log("Browser tab is hidden")
    } else {
        console.log("Browser tab is visible")
    }
});

【讨论】：

始终欢迎提供潜在解决方案的链接，但请add context around the link，以便您的其他用户知道它是什么以及为什么存在。 始终引用重要链接中最相关的部分，以防目标站点无法访问或永久脱机。 考虑到仅仅是指向外部站点的链接 是Why and how are some answers deleted? 的一个可能原因。
VisibilityAPI 对所有浏览器来说都不够好。它不适用于 Firefox。
@CodingbyRaj 这就是它的文档页面托管在 mozilla 上的原因（讽刺）
OP here：这是我过去几年一直在使用的，因此已将其更新为公认的答案。

【解决方案2】：

您可以尝试使用提供跨浏览器支持的框架，例如 MooTools 或 jQuery。他们应该能够更可靠地检测浏览器窗口的blur 和focus 事件。

我个人使用 jQuery 取得了很大的成功：

$(window).blur(function(e) {
    // Do Blur Actions Here
});
$(window).focus(function(e) {
    // Do Focus Actions Here
});

【讨论】：

酷，我可能会看看这些是如何在 jQuery 中实现的
@Daniel 嘿，实际上我正在寻找类似的功能。 $(window).focus(function(e) { // 在此处执行焦点操作});每次当页面中有其他 ajax 功能时，焦点内的内容都会运行，但有一个小变化，1. 当用户在同一页面之间来回导航时，是否可以只运行一次其中的代码。
5 年后： 谢谢老兄！
因使用 jQuery 回答 JavaScript 问题而被否决。