javascript - 网页获得焦点时的事件

Question

谷歌阅读器有一个很好的功能，当你从不同的网页切换到网页时（给予页面焦点），它会向你显示在页面没有焦点时累积的更新。
快速问题#1：他们是怎么做到的？

我认为它们可能会绑定到鼠标移动事件 + 键盘事件，因为我不知道任何开箱即用的事件可以为您提供这种能力。

谷歌搜索是一场噩梦（焦点、标签、网页、用户）。

快速问题 #2：是否有一些软件包可以赋予我这种能力？

我将 jQuery 标签作为所有 Web 开发者忍者的灯塔，但我并不真正关心框架（只要它的 Javascript）

Answer 1

尝试使用 jQueryfocus和blur函数：

$(window).focus(function() {
   console.log('welcome (back)');
});

$(window).blur(function() {
   console.log('bye bye');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click in and out of this frame to test the focus and blur functions.

Answer 2

在对象上使用focusin（聚焦）和focusout（模糊）document：

$(document).bind('focus', function() {
   console.log('welcome (back)');
}).bind('blur', function() {
   console.log('bye bye');
});

Answer 3

我在 FF 中进行了测试，并document.onfocus在我切换到该窗口时被调用。

Answer 4

焦点的反面是模糊。

document.addEventListener("focus", function(){
  console.log("Page in focus")
})

document.addEventListener("blur", function(){
  console.log("Page out of focus")
})

Answer 5

其他答案讨论的焦点/模糊事件与实际的可见性 API 之间存在差异。最好的资源是 MDN 上的文档：https ://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API