在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. 使用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. 使用定时器,如上所述