检测浏览器选项卡是否专注于移动浏览器答案

【问题标题】：Detect If Browser Tab is focused on mobile browsers检测浏览器选项卡是否专注于移动浏览器
【发布时间】：2017-10-01 14:48:09
【问题描述】：

我愿意检测标签是否聚焦在尽可能多的移动浏览器上。

我看到确定可见性的常用方法是 "document.hidden" 或 "document.visibilityState"，但在 https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden#Browser_compatibility 上列出的是 >在 IE mobile 上不兼容。

还发现许多人使用 document.addEventListener("visibilitychange", function() {}) - 这似乎也可能与 IE Mobile 不兼容。

另一个不太常见的用法是 document.hasFocus()，Opera Mini 不支持它，Safari 和移动 Chrome 可能不支持它。..

另外，“window.onblur”似乎不适用于 chrome 模拟器。

有人知道检查浏览器是否专注于所有移动浏览器的另一种方法吗？或者也许上述之一实际上对所有人都兼容？

【问题讨论】：

IE 手机已过时。 Windows Phone 仅占智能手机市场不到 1% 的份额。使用 document.hidden 或 document.visibilityState 并且不支持使用 IE 移动的不断缩小的用户群可能是值得的。

【解决方案1】：

您是否尝试过使用这两个事件：

window.onfocus 和 window.onblur?

您可以关联在聚焦和模糊时触发的代码，因此实际上您可以检测到它什么时候没有聚焦

【讨论】：

在 chrome 模拟器中检查了它们，当页面聚焦时，代码也转到了与 window.onblur 关联的函数
我在页面中添加了与示例相同的功能，并且可以正常工作。它实际上在您切换选项卡时打印模糊，然后在您返回选项卡时输出焦点
只要在页面这里打开chrome控制台，用console.log()分别添加这些功能，打印焦点和模糊。你会注意到在控制台中你有正确的输出顺序
我在此页面的移动响应模拟器上尝试过它，它似乎只有在我关注控制台选项卡后才启动 console.log，当我打开一个新选项卡甚至关注不同的输入字段时如果我没有在此选项卡中关注控制台，它仍然不会打印“模糊”。
在此处打开控制台。定义如下： window.onfocus = function () { console.log('FOCUS'); } window.onblur = function () { console.log('BLUR');然后点击页面，在控制台中点击返回等等等等......现在再试一次，它的工作原理