有没有办法判断浏览器是否处于活动状态？

Question

在我的网站上，我有一个重要的通知提示本机 alert() 以便在 window 尚未聚焦时将网站带到前台。问题在于，在某些浏览器上，如果用户正在使用另一个桌面应用程序（Photoshop、Microsoft Word 等），它不会将浏览器置于该应用程序之上。在这种情况下，警报几乎没有用，我想忽略它（因为它会阻止我页面上的其他脚本）。

有没有办法判断浏览器是设备上的活动应用程序？或者是否有一种不同的、非阻塞的方式将 window 带到前台？

谢谢！

说明：我已经知道如何检查 window 在浏览器中是否处于活动状态，但我只是不知道如何检查浏览器应用程序本身是否处于活动状态。另外，我需要支持的浏览器是 Chrome、Safari、Firefox 和 IE >= 9

Answer 1

有一个全局变量存储window是否激活：

var window_active = true;

现在将事件侦听器添加到 "listen" 以便 window（取消）激活：

window.onblur = function () {
    window_active = false;
};
window.onfocus = function () {
    window_active = true;
};

并且当您调用 alert 函数时，检查全局变量：

if (window_active)
    alert("notification");

我想提一下，如果您更改选项卡或单击 url 栏，window 将被停用，这可能不是您想要的。

Answer 2

您应该使用新的 Notification 对象。即使浏览器未获得焦点，它也能正常工作，并且对于向用户发送重要通知很有用。

示例：http://jsfiddle.net/howderek/792km8td/

document.getElementById('notif').onclick = function () {
    
    function notify () {
        var notification = new Notification('Test!');
    }
    
    
    if (Notification.permission === "granted") {
        setTimeout(notify, 5000);        
    } else {
        Notification.requestPermission(function () {
            if (Notification.permission === "granted") {
                setTimeout(notify, 5000);        
            }             
        });
    }
}

https://developer.mozilla.org/en-US/docs/Web/API/notification

Answer 3

您可以为此使用 Page Visibility API。

兼容IE 10+。

代码小例子：

document.addEventListener("visibilitychange", function(e) {
  console.log("visibility changed!", e);
  if (document.visibilityState === 'visible') {
    console.info("window is visible now!");
  }
  else {
    console.info("something else, maybe you changed tab or minimized window!");
  }
  console.log("check the visibilityState property on document object for more info");
});

即使用户在选项卡打开时将浏览器最小化，这也会起作用，所以我想这符合您的需要:)

有没有办法判断浏览器是否处于活动状态？

Is there a way to tell if a browser is active?

javascript

browser

notifications

示例：http://jsfiddle.net/howderek/792km8td/