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

Question

我想知道如何在iOS 7移动Safari中获取相当于$(window).blur事件。我希望这可以用于检测选项卡何时不再在屏幕上。这已被问几次（Detect moving to a new tab in Mobile Safari），但是，所有的答案或者不再起作用，或者只给出$(window).focus事件，而不是$(window).blur事件。另外，关于safari会关闭$(window).blur吗？

Answer 1

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

页能见度API的-webkit前缀在iOS 7，检测时，我们的标签去前台和后台。 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

当标签丢失并重新获得焦点时，您会看到日志写入页面。