如何检测移动到 Mobile Safari 中的新选项卡

Posted 2023-03-16

【中文标题】如何检测移动到 Mobile Safari 中的新选项卡

【英文标题】：how to detect moving to a new tab in Mobile Safari

【发布时间】：2013-08-24 02:42:43

【问题描述】：

我想知道如何在 ios 7 上的移动 safari 中获得相当于 $(window).blur 事件。我希望这样做是为了检测标签何时不再出现在屏幕上。这已经被问过几次（Detect moving to a new tab in Mobile Safari），但是，所有的答案要么不再起作用，要么只给出$(window).focus 事件，而不是$(window).blur 事件。另外，$(window).blur 会在 safari 关闭时触发吗？

【问题讨论】：

This is a good page for learning more about focusin/focusout and blur events.

This is another good page 用于查看发生的事件。不同的事件发生在不同的浏览器/版本/操作系统/UIWebView。

【参考方案1】：

根据这篇文章：http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Page Visibility 是 iOS 7 上以 webkit 为前缀的 API，用于检测我们的选项卡何时进入前台和后台。 XMLHttpRequest 2.0 规范完全兼容意味着现在我们可以请求“blob”作为响应。视频轨道 API 已经被快速覆盖，它允许我们查询和浏览任何媒体元素上的所有轨道和内容。

实现其基本演示的相关代码如下所示；希望您可以对其进行调整以适应您的要求。这是一个很好的例子，因为它不仅向您展示了如何捕获状态变化，而且还展示了如何在 visibilityChanged 事件期间请求数据：

var eventName = "visibilitychange";
if (document.webkitHidden != undefined) 
    eventName = "webkitvisibilitychange";
    document.write("<h2>webkit prefix detected</h2>");
 else if (document.mozHidden != undefined) 
    eventName = "mozvisibilitychange";
    document.write("<h2>moz prefix detected</h2>");
 else if (document.msHidden != undefined) 
    eventName = "msvisibilitychange";
    document.write("<h2>MS prefix detected</h2>");
 else if (document.hidden != undefined) 
    document.write("<h2>standard API detected</h2>");
 else 
    document.write("<h2>API not available</h2>");



function visibilityChanged() 
    var h4 = document.getElementsByTagName("h4")[0];
    if (document.hidden || document.mozHidden || document.msHidden || document.webkitHidden) 
        h4.innerHTML += "<br>Hidden at " + Date().toString();
        var ajax = new XMLHttpRequest();
        ajax.open("GET", "sleep.php?" + Math.random(), true);
        ajax.onreadystatechange = function () 
            if (ajax.status == 200 && ajax.readyState == 4) 
                h4.innerHTML += "<br>AJAX Async at " + Date().toString();
            
        
        ajax.send(null);

        var ajaxs = new XMLHttpRequest();
        ajax.open("GET", "sleep.php?" + Math.random(), false);
        ajax.send(null);
        h4.innerHTML += "<br>AJAX Sync at " + Date().toString();

        setTimeout(function () 
            h4.innerHTML += "<br>Timer at " + Date().toString();
        , 3000);

     else 
        h4.innerHTML += "<br>Shown at " + Date().toString();
    

document.addEventListener(eventName, visibilityChanged, false);

window.onpageshow = function () 
    h4.innerHTML = "<br>Page show at " + Date().toString();
;

window.onpagehide = function () 
    h4.innerHTML = "<br>Page hide at " + Date().toString();
;

如果你想在你的设备上测试它，这里是现场演示：http://mobilexweb.com/ts/api/page.html

当标签丢失并恢复对焦时，您会看到日志写入页面。

【讨论】：

看起来这对我有用！谢谢！ （由于 SO 的时间限制，赏金将在 3 小时内发放）

没问题！不用担心。前段时间我自己也遇到过，很纠结，后来找到了那篇文章。