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

在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

The opposite of focus is blur.

Name old_name As new_name

Answer 5

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

网页聚焦时的事件

5 个答案: