是否可以在 JavaScript 中檢測到 Android 和 iOS 瀏覽器中的屏幕何時關閉

Question

我正在跟蹤我的應用程序的 javascript 報告的一些高得離譜的加載時間，並發現當窗口處於后台或顯示器關閉時，Android（和 iOS）會暫停一些 JavaScript 執行。

在 Android 上，我發現我可以使用window.onfocus和onblur事件來檢測應用程序何時切換到后台（並且 js 執行將很快暫停，至少對於新腳本而言），但我找不到方法檢測屏幕何時打開或關閉。 這可能嗎？

（在 Safari 上，我得到了類似的結果，只是onfocus和onblur不能可靠地觸發。）

Answer 1

我剛剛為我的用例找到了一個很好的解決方案：

function getTime() {
    return (new Date()).getTime();
}

var lastInterval = getTime();

function intervalHeartbeat() {
    var now = getTime();
    var diff = now - lastInterval;
    var offBy = diff - 1000; // 1000 = the 1 second delay I was expecting
    lastInterval = now;

    if(offBy > 100) { // don't trigger on small stutters less than 100ms
        console.log('interval heartbeat - off by ' + offBy + 'ms');
    }
}

setInterval(intervalHeartbeat, 1000);

當屏幕關閉（或 JS 因任何原因暫停）時，下一個間隔會延遲，直到 JS 執行恢復。 在我的代碼中，我可以通過offBy數量調整計時器並將其稱為良好。

在快速測試中，這似乎在 Android 4.2.2 的瀏覽器和 iOS 6.1.3 上的 Safari 上運行良好。

Answer 2

有幾個選項可以檢查它：

1. 使用可見性 API

2. 使用focus和blur事件來檢測瀏覽器選項卡的可見性：

window.addEventListener("focus", handleBrowserState.bind(context, true));
window.addEventListener("blur", handleBrowserState.bind(context, false));

function handleBrowserState(isActive){
    // do something
}

3. 使用計時器，如上所述

Answer 3

在這里找到了一個不錯的功能：

http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html

(function() {
    var timestamp = new Date().getTime();

    function checkResume() {
        var current = new Date().getTime();
        if (current - timestamp > 4000) {
            var event = document.createEvent("Events");
            event.initEvent("resume", true, true);
            document.dispatchEvent(event);
        }
        timestamp = current;
    }

    window.setInterval(checkResume, 1000);
})();   

注冊活動：

addEventListener("resume", function() {
    alert('Resuming this webapp');
});

這與 Cordova 一致，后者也觸發了resume事件。

Answer 4

屏幕關閉后，您將在腳本中做什么？ 無論如何，您可以注入 Java 對象（ http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String) ）與活動交互並代理您在 JS 世界中需要的所有信息。