document.hidden 与 document.hasFocus() 之间的区别

Question

请解释 document.hidden、HTML5 页面可见性 API 和 document.hasFocus() 之间的区别。我正在执行一个项目，该项目弹出HTML5 Desktop Notification当标签不集中时。我有点困惑该用哪个。

Answer 1

hidden attribute的定义是这样的：

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.

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

hasFocus method是这样定义的

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.

例如，如果您在前台选项卡中打开一个页面，然后打开另一个 window，该选项卡将（或可能）仍然部分可见，因此 hidden returns 错误的。但是，新的 window 有焦点，因此 hasFocus() returns 选项卡为 false。

如果您运行以下代码段，iframe 内的文档将可见但不会获得焦点（此 Whosebug 页面获得焦点）：

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

但在另一个中，由于您单击 iframe 内的按钮，它既可见又集中：

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!" />

Answer 2

TLDR：

document.hidden：returns true 如果 web-app 是运行并且根本不可见

document.hasFocus()：returns true 如果选项卡当前为运行并且选项卡在浏览器中处于焦点状态

document.hidden 与 document.hasFocus() 之间的区别

Difference between document.hidden vs document.hasFocus()

html

javascript

dom

dom-events