blocks|key|1108154|text|属性的定义如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1108155|在获取时，如果hidden+(浏览器的viewport中的根窗口)包含的文档根本不可见，则顶层浏览上下文属性必须返回true。如果文档包含的顶层浏览上下文至少在一个屏幕上部分可见，则该属性必须返回false。
如果defaultView的文档为null，则在获取时，hidden属性必须返回true。|blockquote|style|CODE|1108156|方法的定义如下|1108157|如果hasFocus()的Document对象的浏览上下文是聚焦的，并且它的所有祖先浏览上下文都是聚焦的，并且顶层浏览上下文具有系统焦点，那么Document方法必须返回true。如果Document没有浏览上下文，或者如果Document+浏览上下文没有顶层浏览上下文，那么该方法总是返回false。|1108158|例如，如果您在前台选项卡中打开一个页面，然后打开另一个窗口，该选项卡仍将(或可能)部分可见，因此hidden返回false。但是，新窗口有焦点，因此hasFocus()返回选项卡的false。|1108159|如果运行以下代码段，则iframe中的文档将是可见的，但不会有焦点(此堆栈溢出页面将聚焦)：|1108160|​|1108161|document.body.innerHTML+=+
++'<p>hidden:+'+%2B+document.hidden+%2B+'</p>'+%2B
++'<p>hasFocus:+'+%2B+document.hasFocus()+%2B+'</p>';|code-block|syntax|javascript|1108162|1108163|但是在另一个例子中，由于单击iframe中的按钮，它既可见又聚焦：|1108164|1108165|document.getElementsByTagName('input')[0].onclick+=+function()+{
++document.body.innerHTML+=+
++++'<p>hidden:+'+%2B+document.hidden+%2B+'</p>'+%2B
++++'<p>hasFocus:+'+%2B+document.hasFocus()+%2B+'</p>';
};|1108166|<input+type="button"+value="Click+me!"+/>|1108167|1108168|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/page-visibility/#dom-document-hidden|1|2|http://www.w3.org/TR/html5/dom.html#document|3|http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context|4|5|6|http://www.w3.org/TR/html5/browsers.html#dom-document-defaultview|7|8|9|http://www.w3.org/TR/html5/editing.html#dom-document-hasfocus|10|11|http://www.w3.org/TR/html5/browsers.html#browsing-context|12|http://www.w3.org/TR/html5/browsers.html#ancestor-browsing-context|13|14|15|16|17|18|19^0|0|2|0|0|7|6|3P|6|7|6|1|10|2|2|19|7|3|1T|2|4|1Y|7|5|2Z|B|6|3B|2|7|3P|6|8|0|0|2|9|0|2|A|D|8|1Z|8|2K|8|34|8|D|8|A|O|5|B|14|7|C|1J|7|D|1Z|8|E|2K|8|F|2U|5|G|34|8|H|3D|5|I|3K|7|J|0|1C|6|22|A|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|D|3|E|5|F|7|27|8|@$A|28|B|29|G|H]|$A|2A|B|2B|G|H]]|9|@$A|2C|B|2D|1|2E]|$A|2F|B|2G|1|2H]|$A|2I|B|2J|1|2K]|$A|2L|B|2M|1|2N]|$A|2O|B|2P|1|2Q]|$A|2R|B|2S|1|2T]|$A|2U|B|2V|1|2W]|$A|2X|B|2Y|1|2Z]]|C|$]]|$1|I|3|J|5|6|7|30|8|@]|9|@$A|31|B|32|1|33]]|C|$]]|$1|K|3|L|5|F|7|34|8|@$A|35|B|36|G|H]|$A|37|B|38|G|H]|$A|39|B|3A|G|H]|$A|3B|B|3C|G|H]|$A|3D|B|3E|G|H]]|9|@$A|3F|B|3G|1|3H]|$A|3I|B|3J|1|3K]|$A|3L|B|3M|1|3N]|$A|3O|B|3P|1|3Q]|$A|3R|B|3S|1|3T]|$A|3U|B|3V|1|3W]|$A|3X|B|3Y|1|3Z]|$A|40|B|41|1|42]|$A|43|B|44|1|45]|$A|46|B|47|1|48]]|C|$]]|$1|M|3|N|5|6|7|49|8|@$A|4A|B|4B|G|H]|$A|4C|B|4D|G|H]]|9|@]|C|$]]|$1|O|3|P|5|6|7|4E|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|4F|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|4G|8|@]|9|@]|C|$V|W]]|$1|X|3|R|5|6|7|4H|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|4I|8|@]|9|@]|C|$]]|$1|10|3|R|5|6|7|4J|8|@]|9|@]|C|$]]|$1|11|3|12|5|U|7|4K|8|@]|9|@]|C|$V|W]]|$1|13|3|14|5|U|7|4L|8|@]|9|@]|C|$V|W]]|$1|15|3|R|5|6|7|4M|8|@]|9|@]|C|$]]|$1|16|3|-4|5|6|7|4N|8|@]|9|@]|C|$]]]|17|$18|$5|19|1A|1B|C|$1C|1D]]|1E|$5|19|1A|1B|C|$1C|1D]]|1F|$5|19|1A|1B|C|$1C|1G]]|1H|$5|19|1A|1B|C|$1C|1I]]|1J|$5|19|1A|1B|C|$1C|1G]]|1K|$5|19|1A|1B|C|$1C|1I]]|1L|$5|19|1A|1B|C|$1C|1M]]|1N|$5|19|1A|1B|C|$1C|1G]]|1O|$5|19|1A|1B|C|$1C|1D]]|1P|$5|19|1A|1B|C|$1C|1Q]]|1R|$5|19|1A|1B|C|$1C|1G]]|1S|$5|19|1A|1B|C|$1C|1T]]|1U|$5|19|1A|1B|C|$1C|1V]]|1W|$5|19|1A|1B|C|$1C|1I]]|1X|$5|19|1A|1B|C|$1C|1G]]|1Y|$5|19|1A|1B|C|$1C|1G]]|1Z|$5|19|1A|1B|C|$1C|1T]]|20|$5|19|1A|1B|C|$1C|1G]]|21|$5|19|1A|1B|C|$1C|1T]]|22|$5|19|1A|1B|C|$1C|1I]]]]

<p>The <a href="http://www.w3.org/TR/page-visibility/#dom-document-hidden" rel="noreferrer"><code>hidden</code> attribute</a> is defined like this:</p>

<blockquote>
  <p>On getting, the <a href="http://www.w3.org/TR/page-visibility/#dom-document-hidden" rel="noreferrer"><code>hidden</code></a> attribute MUST return true if the
  <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer">Document</a> contained by the <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context" rel="noreferrer">top level browsing context</a> (root
  window in the browser's viewport) is not visible at all. The attribute
  MUST return false if the <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer">Document</a> contained by the <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context" rel="noreferrer">top level
  browsing context</a> is at least partially visible on at least one
  screen.</p>
  
  <p>If the <a href="http://www.w3.org/TR/html5/browsers.html#dom-document-defaultview" rel="noreferrer">defaultView</a> of the <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer">Document</a> is null, on getting, the
  <a href="http://www.w3.org/TR/page-visibility/#dom-document-hidden" rel="noreferrer"><code>hidden</code></a> attribute MUST return true.</p>
</blockquote>

<p>The <a href="http://www.w3.org/TR/html5/editing.html#dom-document-hasfocus" rel="noreferrer"><code>hasFocus</code> method</a> is defined like this</p>

<blockquote>
  <p>The <code>hasFocus()</code> method on <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer"><code>Document</code></a> objects must return true if
  the <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer"><code>Document</code></a>'s <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context" rel="noreferrer">browsing context</a> is focused, and all its
  <a href="http://www.w3.org/TR/html5/browsers.html#ancestor-browsing-context" rel="noreferrer">ancestor browsing contexts</a> are also focused, and the <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context" rel="noreferrer">top-level
  browsing context</a> has the <em>system focus</em>. If the <a href="http://www.w3.org/TR/html5/dom.html#document" rel="noreferrer"><code>Document</code></a>
  has no <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context" rel="noreferrer">browsing context</a> or if its <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context" rel="noreferrer">browsing context</a> has no
  <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context" rel="noreferrer">top-level browsing context</a>, then the method will always return
  false.</p>
</blockquote>

<p>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 <code>hidden</code> returns false. However, the new window has focus, so <code>hasFocus()</code> returns false for the tab.</p>

<p>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):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.innerHTML = 
  '&lt;p&gt;hidden: ' + document.hidden + '&lt;/p&gt;' +
  '&lt;p&gt;hasFocus: ' + document.hasFocus() + '&lt;/p&gt;';</code></pre>
</div>
</div>
</p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementsByTagName('input')[0].onclick = function() {
  document.body.innerHTML = 
    '&lt;p&gt;hidden: ' + document.hidden + '&lt;/p&gt;' +
    '&lt;p&gt;hasFocus: ' + document.hasFocus() + '&lt;/p&gt;';
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" value="Click me!" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1108175|text|TLDR：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1108176|document.hidden：如果选项卡打开且根本看不到true，则返回true。打开另一个铬窗口并覆盖打开的选项卡将使其返回true。|offset|length|style|CODE|1108177|document.hasFocus()：如果选项卡是打开的，并且没有其他窗口有焦点，则返回true。打开一个铬窗口将使该窗口具有焦点，因此背景中的open选项卡虽然可见，但将返回false。|1108178|entityMap^0|0|0|F|T|4|11|4|0|0|J|19|4|2H|5|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]|$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|K|$]]

<p>TLDR:</p>
<p><code>document.hidden</code>: returns <code>true</code> if tab is open and is not at all visible. Opening another chrome window and covering the open tab would make it return true</p>
<p><code>document.hasFocus()</code>: returns <code>true</code> if the tab is the open tab and no other window has focus. Opening a chrome window would make that window have focus, so the open tab in the background, although visible, would return <code>false</code></p>


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


Difference between document.hidden vs document.hasFocus()

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

请解释document.hidden、HTML5页面可见性API和document.hasFocus()之间的区别。当选项卡没有焦点时，我正在做一个弹出HTML5 Desktop Notification的项目。我有点搞不懂该用哪一种。

问document.hidden与document.hasFocus()的区别
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.hidden与document.hasFocus()的区别EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.hidden与document.hasFocus()的区别
EN