Question

请解释document.hidden，HTML5页面可见性API和document.hasFocus()之间的区别。我正在做一个项目，当标签没有聚焦时弹出HTML5 Desktop Notification。我有点困惑哪一个使用。

Answer 1

hidden attribute的定义如下：

获取时，如果hidden属性必须返回true   Document包含的top level browsing context（root   窗口在浏览器的视口中根本不可见。属性   如果Document包含的top level browsing context至少部分可见，则必须返回false   屏幕。

如果defaultView的Document为空，则在获取时为   hidden属性必须返回true。

hasFocus method的定义如下

如果Document对象上的hasFocus()方法必须返回true Document的browsing context是重点关注的 ancestor browsing contexts也是关注焦点，top-level browsing context具有系统焦点。如果Document 没有browsing context或者browsing context没有 top-level browsing context，然后该方法将始终返回假的。

例如，如果您在前景选项卡中打开一个页面，然后打开另一个窗口，该选项卡将（或可能）仍然部分可见，因此hidden返回false。但是，新窗口具有焦点，因此hasFocus()为选项卡返回false。

如果您运行以下代码段，iframe中的文档将可见，但不会有焦点（而是重点关注此stackoverflow页面）：

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：如果运行网站不可见，则返回true

document.hasFocus()：如果选项卡当前正在运行并且计算机将浏览器作为焦点，则返回true

document.hidden与document.hasFocus（）之间的区别

2 个答案: