mozilla

版本 375963 / 全屏模式切换

  • 版本网址缩略名: DOM/Using_fullscreen_mode
  • 版本标题: 全屏模式切换
  • 版本 id: 375963
  • 创建于:
  • 创建者: sunnylost
  • 是否是当前版本?
  • 评论

修订内容

{{ SeeCompatTable() }}

Fullscreen API 使 Web 站点内容能够以用户屏幕尺寸大小的界面进行显示. 本份文档能够让您了解如何使用该 API.

注意: 该 API 早在标准化进程开发中,,尽管 Gecko 和 Google Chrome 已经实现, 但两个浏览器却无法相互兼容, 并且都没有实现该规范的当前草案。因此, 至少在 Firefox 中,版本9并没有默认开启, 不过在版本10中是默认实现的. 因为在该规范内此 API 规范还只是处于拟稿状态, 经常会收到多数开发者的错误反馈, 所以还只是处于起步状态. 一旦规范有了明确的着落,该文档会被重新整理以适应更多浏览器。

这个 API 能够让你轻松的指引浏览器将一个元素及它的子节点(如果存在的话)占据整个屏幕,在此期间,会将浏览器的界面及屏幕上的其他应用清除。

激活全屏模式

如果你想使一个元素在全屏模式下展现 (比如说 {{ HTMLElement("video") }}),你可以调用该元素的 requestFullscreen() 方法;这个方法在 Gecko 中的实现是 {{ domxref("element.mozRequestFullScreen()") }},在 WebKit 中为 element.webkitRequestFullscreen()。

注意:规范使用标签"Fullscreen",例如在 "requestFullscreen" 或 "fullscreenEnabled"中 - 's'不大写。而这里描述的实现与其他带前缀的实现可能会使用大写的字母 'S'。

现在来看看这个 {{ HTMLElement("video") }} 元素:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

我们可以通过调用下面这个脚本使视频全屏播放:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

屏幕显示差异

运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;":

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

如果你想在 Gecko 下模拟 WebKit 的效果,需要把你希望显示的元素放入另一个元素内,反过来让那个元素全屏显示,然后使用 CSS 调整内部元素的样式,以达到你期望的显示效果。

通知

当成功进入全屏模式后,document 会收到一个 {{ domevent("mozfullscreenchange") }} 事件。当退出全屏状态后,document 又会收到  {{ domevent("mozfullscreenchange") }} 事件。注意 {{ domevent("mozfullscreenchange") }} 事件并不会提供关于 document 是否进入或退出全屏状态的任何信息,但是当 document 拥有一个不为空的 {{ domxref("document.mozFullScreenElement", "mozFullScreenElement") }} 时,你就会知道你已经在全屏模式中了。

全屏调用请求失败时的处理方案

无法保证你能够切换进全屏模式。例如, {{ HTMLElement("iframe") }} 元素拥有 {{ HTMLAttrXRef("mozallowfullscreen", "iframe") }} 属性 ({{ HTMLAttrXRef("webkitallowfullscreen", "iframe") }}, 等等) 能够选择让它们的内容在全屏模式内显示。此外,特定类型的内容,例如窗口插件,无法在全屏模式下展现。尝试使一个无法显示的元素(或该元素的父元素或者子元素)进入全屏模式并不会生效。相反的,请求全屏模式的那个元素会收到一个 {{ domevent("mozfullscreenerror") }} 事件。当请求全屏模式失败后,Firefox 将会在 Web 控制台记录一条错误日志来解释为什么请求会失败。

退出全屏模式

用户总是可以自愿的退出全屏模式;查看 {{ anch("Things your users want to know") }}。你也可以调用 cancelFullscreen()方法来达到同样效果;该方法在 Gecko 中的实现是 mozCancelFullScreen(),在 WebKit 中为 webkitCancelFullScreen()。

其他相关信息

{{ domxref("document") }} 提供了额外一些信息,对开发全屏 web 应用会有所帮助:

{{ domxref("document.mozFullScreenElement", "fullscreenElement") }}
fullscreenElement 属性会告诉你当前全屏显示的 {{ domxref("element") }}。 如果该值为非空,则 document 进入了全屏模式。如果为空则不在全屏模式。
{{ domxref("document.mozFullScreenEnabled", "fullscreenEnabled") }}
fullscreenEnabled 属性告诉了你当前 document 是否进入了可以请求全屏模式的状态。

站点使用者会需要知道的事儿

站点开发者在使用该 API 时必须保证得让用户了解按下"ESC"键 (或 F11) 能够退出全屏模式.

还有一点, 在全屏模式下, 页面导航、标签页切换、应用程序切换要与桌面模式下的行为相同.

样例

该示例页面中有一段视频, 点击"回旋"图标样的按钮或按下 Enter 键使播放器全屏, 同样的, 也可以缩小为页面视频窗口.

{{ DOMLiveSample("fullscreen.html") }}

观察 Enter 键的行为

当页面加载完后, 下面一段代码将会设置为事件监听组件以监视 'Enter' 键的行为.

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

切换全屏模式

当用户敲击 Enter 键时会运行如下代码,如你在上面所见。

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

代码首先检查了 {{ domxref("document") }} 上的 fullscreenElement 属性(也检查了带 -moz- 与 -webkit- 两个前缀的)。如果该属性为 null,则 document 当前处于窗口模式,所以我们需要切换进全屏模式。可以通过调用 {{ domxref("element.mozRequestFullScreen()") }} 或者 webkitRequestFullscreen()来进入全屏模式,具体调用哪个还要看哪个方法可用。

如果已经激活了全屏模式 (fullscreenElement 非空),我们调用 {{ domxref("document.mozCancelFullScreen()") }} 或 webkitCancelFullScreen(),同样要依赖于我们使用了哪个浏览器。

浏览器兼容性

虽然 Gecko 与 WebKit 同时实现了该 API 的一个草案,但还是存在一些细节区别。该文档并不需要关注这些细节问题。当规范与实现彼此差别不大时,本篇文章会进行修订。

{{ CompatibilityTable() }}

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持属性 15 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }} {{ CompatUnknown() }} 12.10 5.0 {{ property_prefix("-webkit") }}
fullscreenEnabled 20 {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }} {{ CompatUnknown() }} 12.10 5.1 {{ property_prefix("-webkit") }}
特性 Android Firefox Mobile (Gecko) IE (移动设备) Opera (移动设备) Safari (移动设备)
基本支持属性 {{ CompatUnknown() }} {{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
fullscreenEnabled {{ CompatUnknown() }} {{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko 下的一些特性

虽然 Gecko 9.0 {{ geckoRelease("9.0") }} 引入了该 API,但在该版本发布时却不是默认开启。若要开启它,需要设置 full-screen-api.enabled 为 true。 该 API 在Gecko 10.0 {{ geckoRelease("10.0") }} 中为默认开启。在 Gecko 中,所有 API 均拼写为 "fullScreen"。

完整文档

Fullscreen API

使用非标准化的方法进行调用

以下是在标准进入草案前浏览器实现的一些方法。在前面介绍了标准方法后,应该避免再使用这些方法:

  • window.fullScreen (Firefox)
  • HTMLMediaElement.webkitDisplayingFullscreen
  • HTMLMediaElement.webkitEnterFullscreen
  • HTMLMediaElement.webkitExitFullscreen
  • HTMLMediaElement.webkitSupportsFullscreen

其他详见

  • {{ domxref("element.mozRequestFullScreen()") }}
  • {{ domxref("element.mozCancelFullScreen()") }}
  • {{ domxref("document.mozFullScreen") }}
  • {{ domxref("document.mozFullScreenElement") }}
  • {{ domxref("document.mozFullScreenEnabled") }}
  • {{ cssxref(":-moz-full-screen") }}
  • {{ cssxref(":-moz-full-screen-ancestor") }}
  • {{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}

{{ languages( { "ja": "ja/DOM/Using_full-screen_mode"} ) }}

修订版来源

<p>{{ SeeCompatTable() }}</p>
<p>Fullscreen API 使 Web 站点内容能够以用户屏幕尺寸大小的界面进行显示. 本份文档能够让您了解如何使用该 API.</p>
<div class="note">
  <strong>注意:</strong>&nbsp;该 API 早在标准化进程开发中,,尽管 Gecko 和 Google Chrome 已经实现, 但两个浏览器却无法相互兼容, 并且都没有实现该规范的当前草案。因此, 至少<a href="/en/DOM/Using_full-screen_mode#Gecko_notes" title="en/DOM/Using_full-screen_mode#Gecko_notes">在 Firefox 中</a>,版本9并没有默认开启, 不过在版本10中是默认实现的. 因为在该<a class="external" href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html">规范</a>内此 API 规范还只是处于拟稿状态, 经常会收到多数开发者的错误反馈, 所以还只是处于起步状态. 一旦规范有了明确的着落,该文档会被重新整理以适应更多浏览器。</div>
<p>这个 API 能够让你轻松的指引浏览器将一个元素及它的子节点(如果存在的话)占据整个屏幕,在此期间,会将浏览器的界面及屏幕上的其他应用清除。</p>
<h2 id="Specification" name="Specification">激活全屏模式</h2>
<p>如果你想使一个元素在全屏模式下展现 (比如说 {{ HTMLElement("video") }}),你可以调用该元素的&nbsp;<code style="font-size: 14px;">requestFullscreen()</code>&nbsp;方法;这个方法在 Gecko 中的实现是 {{ domxref("element.mozRequestFullScreen()") }},在 WebKit 中为&nbsp;<code style="font-size: 14px;">element.webkitRequestFullscreen()。</code></p>
<div class="note">
  <p><strong>注意:</strong><a href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#dom-element-requestfullscreen" title="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#dom-element-requestfullscreen">规范</a>使用标签"Fullscreen",例如在 "requestFullscreen" 或 "fullscreenEnabled"中 - 's'不大写。而这里描述的实现与其他带前缀的实现可能会使用大写的字母 'S'。</p>
</div>
<p>现在来看看这个 {{ HTMLElement("video") }} 元素:</p>
<pre class="brush: html" style="font-size: 14px;">
&lt;video controls id="myvideo"&gt;
&nbsp; &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
&nbsp; &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
&lt;/video&gt;
</pre>
<p>我们可以通过调用下面这个脚本使视频全屏播放:</p>
<pre class="brush: js" style="font-size: 14px;">
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
&nbsp; elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
&nbsp; elem.webkitRequestFullscreen();
}
</pre>
<h3 id=".E5.B1.8F.E5.B9.95.E6.98.BE.E7.A4.BA.E5.B7.AE.E5.BC.82">屏幕显示差异</h3>
<p>运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "<code style="font-size: 14px;">width: 100%; height: 100%</code>"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则"<code style="font-size: 14px;">width: 100%; height: 100%;</code>":</p>
<pre class="brush: css" style="font-size: 14px;">
:-webkit-full-screen #myvideo {
&nbsp; width: 100%;
&nbsp; height: 100%;
}
</pre>
<p>如果你想在 Gecko 下模拟 WebKit 的效果,需要把你希望显示的元素放入另一个元素内,反过来让那个元素全屏显示,然后使用 CSS 调整内部元素的样式,以达到你期望的显示效果。</p>
<h3 id=".E6.B6.88.E6.81.AF.E6.8F.90.E7.A4.BA">通知</h3>
<p>当成功进入全屏模式后,document 会收到一个 {{ domevent("mozfullscreenchange") }} 事件。当退出全屏状态后,document 又会收到 &nbsp;{{ domevent("mozfullscreenchange") }} 事件。注意 {{ domevent("mozfullscreenchange") }} 事件并不会提供关于 document 是否进入或退出全屏状态的任何信息,但是当 document 拥有一个不为空的 {{ domxref("document.mozFullScreenElement", "mozFullScreenElement") }} 时,你就会知道你已经在全屏模式中了。</p>
<h3 id=".E5.85.A8.E5.B1.8F.E8.B0.83.E7.94.A8.E8.AF.B7.E6.B1.82.E5.A4.B1.E8.B4.A5.E6.97.B6.E7.9A.84.E5.A4.84.E7.90.86.E6.96.B9.E6.A1.88">全屏调用请求失败时的处理方案</h3>
<p>无法保证你能够切换进全屏模式。例如, {{ HTMLElement("iframe") }} 元素拥有 {{ HTMLAttrXRef("mozallowfullscreen", "iframe") }} 属性 ({{ HTMLAttrXRef("webkitallowfullscreen", "iframe") }}, 等等) 能够选择让它们的内容在全屏模式内显示。此外,特定类型的内容,例如窗口插件,无法在全屏模式下展现。尝试使一个无法显示的元素(或该元素的父元素或者子元素)进入全屏模式并不会生效。相反的,请求全屏模式的那个元素会收到一个 {{ domevent("mozfullscreenerror") }} 事件。当请求全屏模式失败后,Firefox 将会在 Web 控制台记录一条错误日志来解释为什么请求会失败。</p>
<h2 id=".E5.8F.96.E6.B6.88.E5.85.A8.E5.B1.8F.E6.A8.A1.E5.BC.8F">退出全屏模式</h2>
<p>用户总是可以自愿的退出全屏模式;查看 {{ anch("Things your users want to know") }}。你也可以调用&nbsp;<code style="font-size: 14px;">cancelFullscreen()方法来达到同样效果;该方法在&nbsp;</code>Gecko 中的实现是&nbsp;<code style="font-size: 14px;"><a href="/en/DOM/document.mozCancelFullScreen" title="document.mozCancelFullScreen">mozCancelFullScreen()</a>,在&nbsp;</code>WebKit 中为&nbsp;<code style="font-size: 14px;">webkitCancelFullScreen()。</code></p>
<h2 id=".E5.85.B6.E4.BB.96.E7.9B.B8.E5.85.B3.E4.BF.A1.E6.81.AF">其他相关信息</h2>
<p>{{ domxref("document") }} 提供了额外一些信息,对开发全屏 web 应用会有所帮助:</p>
<dl>
  <dt>
    {{ domxref("document.mozFullScreenElement", "fullscreenElement") }}</dt>
  <dd>
    <code style="font-size: 14px;">fullscreenElement</code>&nbsp;属性会告诉你当前全屏显示的 {{ domxref("element") }}。 如果该值为非空,则 document 进入了全屏模式。如果为空则不在全屏模式。</dd>
  <dt>
    {{ domxref("document.mozFullScreenEnabled", "fullscreenEnabled") }}</dt>
  <dd>
    <code style="font-size: 14px;">fullscreenEnabled</code>&nbsp;属性告诉了你当前 document 是否进入了可以请求全屏模式的状态。</dd>
</dl>
<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">站点使用者会需要知道的事儿</h2>
<p>站点开发者在使用该 API 时必须保证得让用户了解按下"ESC"键 (或 F11) 能够退出全屏模式.</p>
<p>还有一点, 在全屏模式下, 页面导航、标签页切换、应用程序切换要与桌面模式下的行为相同.</p>
<h2 id="Specification" name="Specification">样例</h2>
<p>该示例页面中有一段视频, 点击"回旋"图标样的按钮或按下 Enter 键使播放器全屏, 同样的, 也可以缩小为页面视频窗口.</p>
<p>{{ DOMLiveSample("fullscreen.html") }}</p>
<h3 id=".E8.A7.82.E5.AF.9F_Enter_.E9.94.AE.E7.9A.84.E8.A1.8C.E4.B8.BA">观察 Enter 键的行为</h3>
<p>当页面加载完后, 下面一段代码将会设置为事件监听组件以监视 'Enter' 键的行为.</p>
<pre class="brush: js" style="font-size: 14px;">
document.addEventListener("keydown", function(e) {
&nbsp; if (e.keyCode == 13) {
&nbsp;&nbsp;&nbsp; toggleFullScreen();
&nbsp; }
}, false);
</pre>
<h3 id=".E5.88.87.E6.8D.A2.E5.85.A8.E5.B1.8F.E6.A8.A1.E5.BC.8F">切换全屏模式</h3>
<p>当用户敲击 Enter 键时会运行如下代码,如你在上面所见。</p>
<pre class="brush: js" style="font-size: 14px;">
function toggleFullScreen() {
&nbsp; if (!document.fullscreenElement &amp;&amp;    // alternative standard method
&nbsp;     !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement) {  // current working methods
&nbsp;&nbsp;&nbsp; if (document.documentElement.requestFullscreen) {
    &nbsp; document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
&nbsp;     document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
&nbsp;     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
&nbsp; } else {
&nbsp;   if (document.cancelFullScreen) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.cancelFullScreen();
&nbsp;&nbsp;&nbsp; } else if (document.mozCancelFullScreen) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.mozCancelFullScreen();
&nbsp;&nbsp;&nbsp; } else if (document.webkitCancelFullScreen) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.webkitCancelFullScreen();
&nbsp;&nbsp;&nbsp; }
&nbsp; }
}
</pre>
<p>代码首先检查了&nbsp;<span style="line-height: inherit;">{{ domxref("document") }} 上的&nbsp;</span><code style="font-size: 14px; line-height: inherit;">fullscreenElement</code><span style="line-height: inherit;">&nbsp;属性(也检查了带&nbsp;</span><code style="font-size: 14px; line-height: inherit;">-moz-</code><span style="line-height: inherit;">&nbsp;与&nbsp;</span><code style="font-size: 14px; line-height: inherit;">-webkit- 两个前缀的</code><span style="line-height: inherit;">)。如果该属性为&nbsp;</span><code style="font-size: 14px; line-height: inherit;">null,则&nbsp;</code><span style="line-height: inherit;">document 当前处于窗口模式,所以我们需要切换进全屏模式。可以通过调用 {{ domxref("element.mozRequestFullScreen()") }} 或者&nbsp;</span><code style="font-size: 14px; line-height: inherit;">webkitRequestFullscreen()来进入全屏模式,</code><span style="line-height: inherit;">具体调用哪个还要看哪个方法可用。</span></p>
<p>如果已经激活了全屏模式 (<code style="font-size: 14px;">fullscreenElement 非空</code>),我们调用 {{ domxref("document.mozCancelFullScreen()") }} 或&nbsp;<code style="font-size: 14px;">webkitCancelFullScreen(),同样要依赖于我们使用了哪个浏览器。</code></p>
<h2 id="Specification" name="Specification">浏览器兼容性</h2>
<p>虽然 Gecko 与 WebKit 同时实现了该 API 的一个草案,但还是存在一些细节区别。该文档并不需要关注这些细节问题。当规范与实现彼此差别不大时,本篇文章会进行修订。</p>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>特性</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本支持属性</td>
        <td>15&nbsp;{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>12.10</td>
        <td>5.0 {{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td><code style="font-size: 14px;">fullscreenEnabled</code></td>
        <td>20 {{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>12.10</td>
        <td>5.1 {{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>特性</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE (移动设备)</th>
        <th>Opera (移动设备)</th>
        <th>Safari (移动设备)</th>
      </tr>
      <tr>
        <td>基本支持属性</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code style="font-size: 14px;">fullscreenEnabled</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko_.E4.B8.8B.E7.9A.84.E4.B8.80.E4.BA.9B.E7.89.B9.E6.80.A7">Gecko 下的一些特性</h3>
<p>虽然 Gecko 9.0 {{ geckoRelease("9.0") }} 引入了该 API,但在该版本发布时却不是默认开启。若要开启它,需要设置&nbsp;<code style="font-size: 14px;">full-screen-api.enabled</code>&nbsp;为&nbsp;<code style="font-size: 14px;">true。</code>&nbsp;该 API 在Gecko 10.0 {{ geckoRelease("10.0") }} 中为默认开启。在 Gecko 中,所有 API 均拼写为 "fullScreen"。</p>
<h2 id="Specification" name="Specification">完整文档</h2>
<p><a class="external" href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api" title="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen API</a></p>
<h2 id=".E4.BD.BF.E7.94.A8.E9.9D.9E.E6.A0.87.E5.87.86.E5.8C.96.E7.9A.84.E6.96.B9.E6.B3.95.E8.BF.9B.E8.A1.8C.E8.B0.83.E7.94.A8">使用非标准化的方法进行调用</h2>
<p>以下是在标准进入草案前浏览器实现的一些方法。在前面介绍了标准方法后,应该避免再使用这些方法:</p>
<ul>
  <li><code style="font-size: 14px;">window.fullScreen</code>&nbsp;(Firefox)</li>
  <li><code style="font-size: 14px;">HTMLMediaElement.webkitDisplayingFullscreen</code></li>
  <li><code style="font-size: 14px;">HTMLMediaElement.webkitEnterFullscreen</code></li>
  <li><code style="font-size: 14px;">HTMLMediaElement.webkitExitFullscreen</code></li>
  <li><code style="font-size: 14px;">HTMLMediaElement.webkitSupportsFullscreen</code></li>
</ul>
<h2 id=".E5.85.B6.E4.BB.96.E8.AF.A6.E8.A7.81">其他详见</h2>
<ul>
  <li>{{ domxref("element.mozRequestFullScreen()") }}</li>
  <li>{{ domxref("element.mozCancelFullScreen()") }}</li>
  <li>{{ domxref("document.mozFullScreen") }}</li>
  <li>{{ domxref("document.mozFullScreenElement") }}</li>
  <li>{{ domxref("document.mozFullScreenEnabled") }}</li>
  <li>{{ cssxref(":-moz-full-screen") }}</li>
  <li>{{ cssxref(":-moz-full-screen-ancestor") }}</li>
  <li>{{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}</li>
</ul>
<ul>
  <li><a class="external" href="http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html" title="http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html">博文: Firefox 下的 HTML full-screen 可在 Nightly 中启用</a></li>
</ul>
<p>{{ languages( { "ja": "ja/DOM/Using_full-screen_mode"} ) }}</p>
恢复到这个版本