Question

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

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

谢谢！

澄清：我已经知道如何在浏览器中检查窗口是否处于活动状态，但我只是不知道如何检查浏览器应用程序本身是否处于活动状态。此外，我需要支持的浏览器是Chrome，Safari，Firefox和IE＆gt; = 9

Answer 1

您应该使用新的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 2

您可以使用Page Visibility API进行此操作。

它与IE 10 +兼容。

代码的小例子：

＆＃13;

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");
});

＆＃13;

即使用户在标签打开时最小化浏览器，这也会有效，所以我认为这符合您的需求：）

Answer 3

有一个全局变量存储窗口是否处于活动状态：

var window_active = true;

现在添加事件监听器以“监听”窗口（de）激活：

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

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

if (window_active)
    alert("notification");

我想提一下，如果您更改标签或点击网址栏，该窗口将被取消激活，这可能不是您想要的。

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

3 个答案:

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