document.hidden与document.hasFocus（）之间的区别 [英] Difference between document.hidden vs document.hasFocus()

问题描述

请解释 document.hidden ，HTML5页面可见性API和 document.hasFocus（）之间的区别。当该标签没有被关注时，我正在做一个项目，弹出 HTML5 Desktop Notification 。我有点迷惑哪一个使用。

Please explain the difference between document.hidden , the HTML5 Page Visibility API and document.hasFocus(). I am doing a project which pops HTML5 Desktop Notification when the tab is not focused . I am kind of confused which one to use.

推荐答案

隐藏属性定义如下：

The hidden attribute is defined like this:

获取时， 隐藏 属性必须返回true如果
文档由顶级浏览上下文（浏览器视口中的root
窗口）根本看不到。属性
必须返回false，如果文档包含顶级
浏览上下文是在至少一个
屏幕上至少部分可见。

On getting, the hidden attribute MUST return true if the Document contained by the top level browsing context (root window in the browser's viewport) is not visible at all. The attribute MUST return false if the Document contained by the top level browsing context is at least partially visible on at least one screen.

如果 defaultView 的browsers.html＃dom-document-defaultview noreferrer>文档为null，在获取时，
隐藏 属性必须返回true。

If the defaultView of the Document is null, on getting, the hidden attribute MUST return true.

hasFocus 方法定义如下

The hasFocus method is defined like this

hasFocus（）方法 文件 对象如果
文档 的浏览环境是专注于其所有
祖先浏览上下文也重点关注，顶级
浏览上下文具有系统焦点。如果 文件
没有浏览上下文，或者如果它的< a href =http://www.w3.org/TR/html5/browsers.html#browsing-context =noreferrer>浏览上下文没有
顶级浏览上下文，那么该方法将始终返回
false。

The hasFocus() method on Document objects must return true if the Document's browsing context is focused, and all its ancestor browsing contexts are also focused, and the top-level browsing context has the system focus. If the Document has no browsing context or if its browsing context has no top-level browsing context, then the method will always return false.

例如，如果您在前台选项卡中打开一个页面，然后打开另一个窗口，该选项卡将（或可能）仍然部分可见，所以隐藏返回false。但是，新窗口有焦点，所以 hasFocus（）为选项卡返回false。

For example, if you open a page in a foreground tab, and then open another window, the tab will (or may) still be partially visible, so hidden returns false. However, the new window has focus, so hasFocus() returns false for the tab.

如果运行以下代码片段中，iframe中的文档将可见，但不会有焦点（这个stackoverflow页面被重点改写）：

If you run the following snippet, the document inside the iframe will be visible but won't have focus (this stackoverflow page is focused instead):

document.body.innerHTML = 
  '<p>hidden: ' + document.hidden + '</p>' +
  '<p>hasFocus: ' + document.hasFocus() + '</p>';

另外一个，因为你点击iframe里面的按钮，它既可见又集中：

But in this other one, since you click the button inside the iframe, it is both visible and focused:

document.getElementsByTagName('input')[0].onclick = function() {
  document.body.innerHTML = 
    '<p>hidden: ' + document.hidden + '</p>' +
    '<p>hasFocus: ' + document.hasFocus() + '</p>';
};

<input type="button" value="Click me!" />

这篇关于document.hidden与document.hasFocus（）之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！