在JavaScript中，是否有可能在Android和iOS浏览器中检测屏幕何时关闭

Question

我正在追踪我的应用程序的javascript报告的一些非常高的加载时间，并发现Android（和iOS）在窗口处于后台或显示器关闭时暂停一些JavaScript执行。

在Android上，我发现我可以使用window.onfocus和onblur事件来检测应用程序何时切换到后台（并且js执行很快会被暂停，至少对于新脚本而言），但我找不到检测方法屏幕打开或关闭时。这可能吗？

（在Safari上，我有类似的结果，除了onfocus和onblur没有可靠的射击。）

Answer 1

几乎没有选项来检查它：

1. 使用Visibility 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 2

我刚刚为我的用例找到了一个非常好的解决方案：

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 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世界中所需的所有信息。