是否可以在 JavaScript 中检测 Android 和 iOS 浏览器何时关闭屏幕答案

【问题标题】：Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers是否可以在 JavaScript 中检测 Android 和 iOS 浏览器何时关闭屏幕
【发布时间】：2020-03-16 07:53:55
【问题描述】：

我正在跟踪我的应用程序的 javascript 报告的一些可笑的高加载时间，并发现当窗口在后台或显示屏关闭时，Android（和 iOS）会暂停一些 JavaScript 执行。

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

（在 Safari 上，我得到了类似的结果，只是 onfocus 和 onblur 没有可靠地触发。）

【问题讨论】：

鉴于 Android 通常会进入某种锁定屏幕，关闭和打开屏幕是否不会触发 onblur 和 onfocus 事件？我认为关闭它可能会触发onblur，至少唤醒它会触发onblur（如果没有关闭它），因为Android会打开锁定屏幕，然后在通过锁定屏幕后, onfocus 会触发，因为您正在从锁定屏幕转换回活动应用程序。我不是 Android 专家，但我想如果你不检查的话，我会把这个想法扔掉。
好吧，我测试的时候没有，但是现在你提到它，我已经禁用了我的锁屏。只要我按下电源按钮，它就会回到我打开的最后一个应用程序。启用锁定屏幕会导致触发焦点和模糊事件。谢谢！

标签： javascript android ios mobile-safari android-browser

【解决方案1】：

检查它的选项很少：

使用Visibility API
使用focus 和blur 事件检测浏览器标签的可见性：

window.addEventListener("焦点", handleBrowserState.bind(context, true)); window.addEventListener("blur", handleBrowserState.bind(context, false)); 函数句柄浏览器状态（isActive）{ // 做一点事 }

如上所述使用计时器

【讨论】：

哈，页面可见性规范的初稿在我发布问题大约一个月后发布！在这一点上，这似乎是正确的答案。
获得正确答案 3 年 :) 我现在正在处理同样的问题，并且已经获得了很多新信息......但我仍然遇到 Android Internet Browser 的一些问题（基于Chromium 34) - 此浏览器不处理可见性更改，并且上述方法均无效...

【解决方案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 上运行良好。

【讨论】：

【解决方案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 事件。

【讨论】：

【解决方案4】：

一旦屏幕关闭，您将在脚本中做什么？无论如何，您可以注入 Java 对象 (http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)) 来与活动交互并代理您在 JS 世界中所需的所有信息。

【讨论】：

不是我想做的事，但你得到了一个赞成票，因为它是对这个问题的一个很好的答案:)