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

Question

请解释document.hiddenHTML5 Page Visibility API和document.hasFocus().之间的区别.我正在做一个项目,HTML5 Desktop Notification当选项卡没有聚焦时弹出.我有点困惑哪一个使用.

Answer 1

该hidden属性定义如下:

在获取时,hidden如果顶级浏览上下文(浏览器视口中的根窗口)包含的文档根本不可见,则该属性必须返回true .如果顶级浏览上下文包含的文档在至少一个屏幕上至少部分可见,则该属性必须返回false .

如果默认视图中的文件为空,在获取时,该 hidden属性必须返回true.

该hasFocus方法定义如下

在hasFocus()对方法Document如果对象必须返回true Document的浏览器上下文的重点是,它的所有 祖先浏览上下文进行聚焦,而顶级浏览方面有系统的焦点.如果Document 没有浏览上下文或其浏览上下文没有 顶级浏览上下文,则该方法将始终返回false.

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

如果您运行以下代码段,iframe中的文档将可见,但不会有焦点(此堆栈溢出页面会被重点关注):

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

总而言之：

document.hiddentrue：如果选项卡打开且根本不可见，则返回。打开另一个 chrome 窗口并覆盖打开的选项卡将使其返回 true

document.hasFocus()true：如果选项卡是打开的选项卡并且没有其他窗口具有焦点，则返回。打开 Chrome 窗口将使该窗口具有焦点，因此背景中打开的选项卡虽然可见，但会返回false