如何檢測移動到移動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

當標籤丟失並重新獲得焦點時，您會看到日誌寫入頁面。