javascript如何检查浏览器是否获得焦点

Question

我有一个基于 Meanjs 的工作聊天，我想向它添加一个我在其他可用聊天中看到的新功能:

特点:1. 当收到消息时，窗口的标题开始在原来的和通知消息之间切换，如“新消息”2. 当浏览器或标签获得焦点时，停止正在进行的事件并重置回静态页面标题

第一个是简单的有一个计时器，并在间隔期间更改页面标题，但我不知道如何获得浏览器获得或失去焦点的事件。

我可以简单地询问浏览器的“如何检测焦点”，但我解释了我的目的，希望了解这个特定用例中的最佳实践并了解更多信息。

欢迎并欣赏类(class)。

Answer 1

简单地说，您可以使用 native javascript 事件处理程序检查窗口是否处于焦点上。我们将使用 window.onblur 检查窗口是否不在焦点上，并使用 window.onfocus 检查窗口是否在焦点上。

    window.onblur = function(){
      // do some event handler here...in your case, to show new message alert on the title if the user receive new message.
       newMessageChecker();
    }
    window.onfocus = function(){
       // invoke another function to bring back your default title and destroy the Interval you have created.
       destroyMessageChecker();
    }
    function newMessageChecker(){
      // check if the user have new message. you may use setInterval method
      window.messageChecker = setInterval(function(){
            // if true, do some stuff like this
               document.title = "New Message("+ messageCount +") : " + yourDefaultTitleValue;
      }, 3000);
    }
    function destroyMessageChecker(){
      // change your title to default value
      document.title = yourDefaultTitleValue;
      clearInterval(window.messageChecker);
    }

有关窗口事件的更多信息，请查看此链接 Window Event Attributes .如果您更喜欢使用 jQuery，请查看此页面 Using jQuery to bind “focus” and “blur” functions for “window”