aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/fullscreen_api/指南/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/api/fullscreen_api/指南/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/api/fullscreen_api/指南/index.html')
-rw-r--r--files/zh-cn/web/api/fullscreen_api/指南/index.html235
1 files changed, 0 insertions, 235 deletions
diff --git a/files/zh-cn/web/api/fullscreen_api/指南/index.html b/files/zh-cn/web/api/fullscreen_api/指南/index.html
deleted file mode 100644
index b2d2d36f3a..0000000000
--- a/files/zh-cn/web/api/fullscreen_api/指南/index.html
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: 全屏指南
-slug: Web/API/Fullscreen_API/指南
-tags:
- - API
- - 全屏
- - 全屏 API
- - 图像
- - 屏幕
- - 展示
- - 指南
- - 显示
- - 游戏
-translation_of: Web/API/Fullscreen_API/Guide
----
-<div>{{DefaultAPISidebar("Fullscreen API")}}</div>
-
-<p><span class="seoSummary">本文主要说明如何使用全屏API将给定元素设置为全屏模式,以及如何检测浏览器何时进入或退出全屏模式。</span></p>
-
-<h2 id="激活全屏模式">激活全屏模式</h2>
-
-<p>对于一个你想要以全屏模式展示的元素(例如 {{ HTMLElement("video") }}),你通过调用它的 {{ domxref("Element.requestFullscreen()") }} 方法就能简单地激活它的全屏模式。</p>
-
-<p>我们来看看 {{HTMLElement("video")}} 这个元素:</p>
-
-<pre class="brush: html">&lt;video controls id="myvideo"&gt;
-  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
-  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
-&lt;/video&gt;
-</pre>
-
-<p>我们可以用下面的代码让视频进入全屏模式:</p>
-
-<pre class="brush: js">var elem = document.getElementById("myvideo");
-if (elem.requestFullscreen) {
- elem.requestFullscreen();
-}</pre>
-
-<p>这段代码会在调用 <code>requestFullscreen()</code> 方法之前先检验它是否存在。</p>
-
-<h3 id="显示差异">显示差异</h3>
-
-<p>值得留意的是,目前 Gecko 和 WebKit 的实现之间的关键差异:Gecko 自动为元素添加了CSS规则,使其拉伸以填满屏幕: "<code>width: 100%; height: 100%</code>"。WebKit 没有这样做,相反地,它将全屏元素居中,不改变大小,而屏幕的其他部分为黑色。为了在 Webkit 中获得相同的全屏行为,你需要自行为元素添加 CSS "<code>width: 100%; height: 100%;</code>":</p>
-
-<pre class="brush: css">#myvideo:-webkit-full-screen {
-  width: 100%;
-  height: 100%;
-}
-</pre>
-
-<p>另一方面, 如果你尝试在在 Gecko 上模拟 WebKit 的行为,你需要把你想要呈现的元素放在另一个实际调整为全屏幕的元素中, 并使用 CSS 规则调整内部的元素,从而达到你想要的样式。</p>
-
-<h3 id="通知">通知</h3>
-
-<p>当成功进入全屏模式时,包含该元素的文档会收到一个 {{Event("fullscreenchange")}} 事件。当退出全屏模式时,文档会再一次收到 {{Event("fullscreenchange")}} 事件。注意此 {{Event("fullscreenchange")}} 事件,不管在文档进入和退出全屏模式时,都不会提供任何信息,但如果文档的 {{DOMxRef("document.fullscreenElement", "fullscreenElement")}} 为非空(`null`),即处于全屏模式中。</p>
-
-<h3 id="当全屏请求失败时">当全屏请求失败时</h3>
-
-<p>你并不总是可以进入全屏模式。例如 {{HTMLElement("iframe")}} 元素具有 {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性,可选择是否将其内容以全屏模式显示。另外,几种特定的内容,比如窗体插件(windowed plug-ins),不能以全屏模式显示。尝试将不能以全屏模式显示的元素(或者此元素的父元素和后代元素)的时候,全屏请求是无效的。而相应元素会收到一个 <code>mozfullscreenerror</code> 事件。当全屏请求失败时,Firefox 会在 Web 控制台上打一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera 中,不会生成这样的警告。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意:</strong>全屏请求必须在事件处理函数中调用,否则将会被拒绝。 </p>
-</div>
-
-<h2 id="退出全屏模式">退出全屏模式</h2>
-
-<p> </p>
-
-<p>用户总是可以自行退出全屏模式;详见 {{Anch("Things your users want to know")}}。你也可以以编程方式通过调用 {{DOMxRef("Document.exitFullscreen()")}} 方法来做到这点。</p>
-
-<h2 id="其他信息">其他信息</h2>
-
-<p>{{DOMxRef("Document")}} 提供了一些额外的信息, 在开发全屏网络应用时会很有用:</p>
-
-<dl>
- <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt>
- <dd><code>fullscreenElement</code> 属性可以告诉你当前以全屏模式显示的元素 {{DOMxRef("Element")}} 。若此项非空,文档处于全屏模式中,否则不在。</dd>
- <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt>
- <dd><code>fullscreenEnabled</code> 属性可以告诉你文档当前是否为允许请求进入全屏幕模式的状态。</dd>
-</dl>
-
-<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">你的用户想了解的信息</h2>
-
-<p>你可能想确保使你的用户得知他可以按 <kbd>ESC</kbd>  键(或 <kbd>F11</kbd>) 退出全屏模式。</p>
-
-<p>此外,当处在全屏模式中,浏览其他页面、切换标签页、或者切换到其他应用 (例如使用 <kbd>Alt</kbd>-<kbd>Tab</kbd>)  也会导致退出全屏模式。</p>
-
-<h2 id="示例">示例</h2>
-
-<p>在这个例子中,网页中显示了一个视频。按下 <kbd>Return</kbd> 或 <kbd>Enter</kbd> 键让用户在视频的窗口显示和全屏显示之间切换。</p>
-
-<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p>
-
-<h3 id="监听_Enter_键">监听 <kbd>Enter</kbd> 键</h3>
-
-<p>当页面加载完成时,这段代码可以设置一个事件监听器以监听 <kbd>Enter</kbd> 键。</p>
-
-<pre class="brush: js">document.addEventListener("keydown", function(e) {
-  if (e.keyCode == 13) {
-    toggleFullScreen();
-  }
-}, false);
-</pre>
-
-<h3 id="切换全屏模式">切换全屏模式</h3>
-
-<p>当用户按下 <kbd>Enter</kbd> 键时,这段代码会被调用,像上面示例看到的那样。</p>
-
-<pre class="brush: js">function toggleFullScreen() {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen();
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  }
-}</pre>
-
-<p>这段代码首先检查 {{DOMxRef("document")}} 的<code>fullscreenElement</code> 属性的值(亦要检查带有前缀 <code>moz</code>、<code>ms<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">、</span></font></code><code>webkit</code>)。如果其为 <code>null</code>,文档当前处于窗口模式中,所以我们需要切换到全屏模式。通过调用{{DOMxRef("element.requestFullscreen()")}},可以切换到全屏模式。</p>
-
-<p>如果全屏模式已经激活 (<code>fullscreenElement</code> 不为 <code>null</code>),我们可以调用 {{DOMxRef("document.exitFullscreen()")}}(或其前缀化的版本,这取决于你使用的浏览器)。</p>
-
-<h2 id="前缀">前缀</h2>
-
-<div class="blockIndicator geckoVersionNote">
-<p><strong>注意:</strong>现在,只有 Firefox 64 和 Chrome 71 支持无前缀。</p>
-</div>
-
-<p>目前并不是所有的浏览器都实现了 API 的无前缀版本(你可以使用 <a href="https://github.com/rafrex/fscreen">Fscreen</a> 获取跨浏览器全屏API),这里有一份表格总结了前缀和它们之间的命名区别:</p>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="row">Standard</th>
- <th scope="col">WebKit (Safari) / Blink (Chrome &amp; Opera) / Edge</th>
- <th scope="col">Gecko (Firefox)</th>
- <th scope="col">Internet Explorer</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th scope="row">{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</th>
- <td><code>webkitIsFullScreen</code></td>
- <td><code>mozFullScreen</code></td>
- <td>-</td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("Document.fullscreenEnabled")}}</th>
- <td><code>webkitFullscreenEnabled</code></td>
- <td><code>mozFullScreenEnabled</code></td>
- <td><code>msFullscreenEnabled</code></td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</th>
- <td><code>webkitFullscreenElement</code></td>
- <td><code>mozFullScreenElement</code></td>
- <td><code>msFullscreenElement</code></td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("Document.onfullscreenchange")}}</th>
- <td><code>onwebkitfullscreenchange</code></td>
- <td><code>onmozfullscreenchange</code></td>
- <td><code>onMSFullscreenChange</code></td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("Document.onfullscreenerror")}}</th>
- <td><code>onwebkitfullscreenerror</code></td>
- <td><code>onmozfullscreenerror</code></td>
- <td><code>onMSFullscreenError</code></td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("Document.exitFullscreen()")}}</th>
- <td><code>webkitExitFullscreen()</code></td>
- <td><code>mozCancelFullScreen()</code></td>
- <td><code>msExitFullscreen()</code></td>
- </tr>
- <tr>
- <th scope="row">{{DOMxRef("Element.requestFullscreen()")}}</th>
- <td><code>webkitRequestFullscreen()</code></td>
- <td><code>mozRequestFullScreen()</code></td>
- <td><code>msRequestFullscreen()</code></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">规范</th>
- <th scope="col">状态</th>
- <th scope="col">备注</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("Fullscreen")}}</td>
- <td>{{Spec2("Fullscreen")}}</td>
- <td>初始版本</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
-
-<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3>
-
-<div>
-
-
-<p>{{Compat("api.Document.fullscreen")}}</p>
-
-<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3>
-
-<div>
-<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
-
-<p>{{Compat("api.Document.fullscreenEnabled")}}</p>
-</div>
-</div>
-
-<h2 id="扩展链接">扩展链接</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Web/API/Fullscreen_API">全屏 API </a></li>
- <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
- <li>{{DOMxRef("Document.exitFullscreen()")}}</li>
- <li>{{DOMxRef("Document.fullscreen")}}</li>
- <li>{{DOMxRef("Document.fullscreenElement")}}</li>
- <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li>
- <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
-</ul>
-
-<p> </p>