检测移动到 Mobile Safari 中的新选项卡答案

【问题标题】：Detect moving to a new tab in Mobile Safari检测移动到 Mobile Safari 中的新选项卡
【发布时间】：2012-06-18 14:53:18
【问题描述】：

我有一系列页面可以打开弹出窗口（Mobile Safari 中的新标签页）。每个弹出窗口都需要知道它们何时是焦点。在台式机上，我们使用window.onblur 和window.onfocus 来驱动这种行为。但是，这些事件都不能在 iPad 上运行。我还尝试了window.onpageshow 和window.onpagehide，它们似乎也没有在正确的时间触发。我有一个测试 HTML 文件：

<html>
<head>
<script language="javascript">
console.log('Hello');
window.onblur = function(e) { console.log('blur'); };
window.onfocus = function(e) { console.log('focus'); };
window.onpagehide = function(e) { console.log('pagehide'); };
window.onpageshow = function(e) { console.log('pageshow'); };
</script>
</head>
<body>
<a href="http://www.google.com" target="_blank">Click Me</a>
</body>
</html>

理论上，当您单击“单击我”时，您应该会在新窗口出现时收到一个模糊事件。但这不会发生在 Mobile Safari 上。 onpagehide 和 onpageshow 也没有表现出爱，它们只会帮助检测您何时要关闭标签。

如何在 Mobile Safari 中获得我正在寻找的行为？有可能吗？

【问题讨论】：

标签： javascript iphone ios ipad mobile-safari

【解决方案1】：

试试这个：https://gist.github.com/1122546

这是一个 Visibilty API polyfill。应该做的伎俩。

【讨论】：

谢谢，这看起来就是票！
实际上根据 Chris Keele 的评论，这可能不适用于 Mobile Safari。我现在没有 iPad - 如果他说的是真的，移动 Safari 有没有办法绕过它？

【解决方案2】：

我不认为可以检测到onblur，但这是检测onfocus的代码：

var timestamp=new Date().getTime();
function checkResume()
{
    var current=new Date().getTime();
    if(current-timestamp>5000)
    {
        var event=document.createEvent("Events");
        event.initEvent("focus",true,true);
        document.dispatchEvent(event);
    }
    timestamp=current;
}
window.setInterval(checkResume,50);

那你就写：

document.addEventListener("focus",function()
{
    alert("Focus detected");
},false);

【讨论】：

【解决方案3】：

iOS 5 在非活动标签中暂停 JS。也许这个话题可以帮助你。

ios 5 pauses javascript when tab is not active

Handling standby on iPad using Javascript

【讨论】：

【解决方案4】：

最近有人问了同样的问题，所以我将这个答案链接到我的旧答案here。

Mageek 的方法与我正在做的非常相似，但也会在滚动事件或键盘可见时触发。防止滚动时的行为并不是非常具有挑战性，但我从来没有时间查找屏幕上的键盘事件。

我的对象还利用 requestAnimationFrame 并将仅将焦点黑客用作后备，选择在可用的情况下使用 Visibility API（理想情况下使其面向未来）。

【讨论】：

这只会告诉你什么时候回到标签，对吧？我想知道具有此代码的选项卡何时不再出现在屏幕上，并在重新打开选项卡之前知道它。