网页聚焦时的事件

Question

谷歌阅读器有一个很好的功能,当你从一个不同的网页切换到网页(给予页面焦点)时,它会显示页面未聚焦时累积的更新.
快速问题#1:他们是如何做到的？

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

谷歌搜索是一场噩梦(焦点,标签,网页,用户).

快速问题#2:那里有一些包给我这种能力吗？

我将jQuery标记作为所有Web开发人员ninjas的灯塔,但我并不关心框架(只要它的Javascript)

Answer 1

尝试使用jQuery focus和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

焦点的反面是模糊。

// Use document.body, as "document" alone makes the snippet demo effective.
document.addEventListener("focus", function(){
  console.log("Page in focus")
})

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

Answer 3

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

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

Answer 4

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