mozilla

版本 350099 / 全屏模式切换

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

修订内容

{{ SeeCompatTable() }}

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

注意: 该 API 早在标准化进程开发中, 尽管 Gecko 和 Google Chrome 已经实现, 但两个浏览器却无法相互兼容, 且只在自家的文档下拟定规范. 如上所述, 至少在 Firefox 中, 版本9并没有默认开启, 不过在版本10中是默认实现的. 因为在该规范内此 API 规范还只是处于拟稿状态, 经常会收到多数开发者的错误反馈, 所以还只是处于起步状态. 一旦该规范有了明确的着落, 文档中的条例将会让各浏览器相互兼容, 即让该规范适用于所有浏览器.

The API lets you easily direct the browser to make an element and its asdchildren, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.

激活全屏模式

Given an element that you'd like to present in fullscreen mode (such as a {{ HTMLElement("video") }}, for example), you can present it in fullscreen mode by simply calling its requestFullscreen() method; this method is implemented in Gecko as {{ domxref("element.mozRequestFullScreen()") }} and in WebKit as element.webkitRequestFullscreen().

Note: The specification uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here and other prefixed implementations may use a capital '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();
}

屏幕显示差异

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:

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

On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.

消息提示

When fullscreen mode is successfully engaged, the document which contains the document receives a {{ domevent("mozfullscreenchange") }} event. When fullscreen mode is exited, the document again receives a  {{ domevent("mozfullscreenchange") }} event. Note that the {{ domevent("mozfullscreenchange") }} event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null {{ domxref("document.mozFullScreenElement", "mozFullScreenElement") }}, you know you're in fullscreen mode.

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

It's not guaranteed that you'll be able to switch into fullscreen mode. For example, {{ HTMLElement("iframe") }} elements have the {{ HTMLAttrXRef("mozallowfullscreen", "iframe") }} attribute ({{ HTMLAttrXRef("webkitallowfullscreen", "iframe") }}, etc) in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a {{ domevent("mozfullscreenerror") }} event. When a fullscreen request fails Firefox will log an error message to the Web Console explaining why the request failed.

取消全屏模式

The user always has the ability to exit fullscreen mode of their own accord; see {{ anch("Things your users want to know") }}. You can also do so programmatically by calling the cancelFullscreen() method; this is implemented in Gecko as mozCancelFullScreen() and WebKit as webkitCancelFullScreen().

其他相关信息

The {{ domxref("document") }} provides some additional information that can be useful when developing fullscreen web applications:

{{ domxref("document.mozFullScreenElement", "fullscreenElement") }}
The fullscreenElement attribute tells you the {{ domxref("element") }} that's currently being displayed fullscreen. If this is non-null, the document is in fullscreen mode. If this is null, the document is not in fullscreen mode.
{{ domxref("document.mozFullScreenEnabled", "fullscreenEnabled") }}
The fullscreenEnabled attribute tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.

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

You'll want to be sure to let your users know that they can press the ESC key (or F11) to exit fullscreen mode.

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

样例

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

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

观察 Enter 键的行为

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

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

切换全屏模式

This code is called when the user hits the Enter key, as seen above.

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();
    }
  }
}

This starts by looking at the value of the fullscreenElement attribute on the {{ domxref("document") }} (checking it prefixed with both -moz- and -webkit-). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either {{ domxref("element.mozRequestFullScreen()") }} or webkitRequestFullscreen(), depending on which is available.

If fullscreen mode is already active (fullscreenElement is non-null), we call {{ domxref("document.mozCancelFullScreen()") }} or webkitCancelFullScreen(), again depending on which browser is in use.

浏览器兼容性

Although both Gecko and WebKit implement a draft of this API, there are some subtle differences. This document doesn't necessarily try to call them all into focus. The article will be revised as the spec and implementations fall closer into alignment with one another.

{{ 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 下的一些特性

Although this API was introduced in Gecko 9.0 {{ geckoRelease("9.0") }}, it's not enabled by default in that release. To enable it, set the full-screen-api.enabled preference to true. The API is enabled by default in Gecko 10.0 {{ geckoRelease("10.0") }}. In Gecko all the API is spelt "fullScreen".

完整文档

Fullscreen API

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

These are some of the methods that browsers implemented before the standard was drafted. Having the standard methods described above it's better to avoid using the following ones:

  • 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> 该 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>The API lets you easily direct the browser to make an element and its asdchildren, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.</p>
<h2 id="Specification" name="Specification">激活全屏模式</h2>
<p>Given an element that you'd like to present in fullscreen mode (such as a {{ HTMLElement("video") }}, for example), you can present it in fullscreen mode by simply calling its <code>requestFullscreen()</code> method; this method is implemented in Gecko as {{ domxref("element.mozRequestFullScreen()") }} and in WebKit as <code>element.webkitRequestFullscreen()</code>.</p>
<div class="note">
  <p><strong>Note:</strong>&nbsp;The <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">specification</a> uses the label, "Fullscreen" as in "requestFullscreen" or "fullscreenEnabled" - without a capital 's'. The implementation described here&nbsp;and other prefixed implementations&nbsp;may use a capital 'S'.</p>
</div>
<p>现在来看看这个 {{ HTMLElement("video") }} 元素:</p>
<pre class="brush: html">
&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">
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>It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "<code>width: 100%; height: 100%</code>". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "<code>width: 100%; height: 100%;</code>" CSS rules to the element yourself:</p>
<pre class="brush: css">
:-webkit-full-screen #myvideo {
&nbsp; width: 100%;
&nbsp; height: 100%;
}
</pre>
<p>On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.</p>
<h3 id=".E6.B6.88.E6.81.AF.E6.8F.90.E7.A4.BA">消息提示</h3>
<p>When fullscreen mode is successfully engaged, the document which contains the document receives a {{ domevent("mozfullscreenchange") }} event. When fullscreen mode is exited, the document again receives a&nbsp; {{ domevent("mozfullscreenchange") }} event. Note that the {{ domevent("mozfullscreenchange") }} event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null {{ domxref("document.mozFullScreenElement", "mozFullScreenElement") }}, you know you're in fullscreen mode.</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>It's not guaranteed that you'll be able to switch into fullscreen mode. For example, {{ HTMLElement("iframe") }} elements have the {{ HTMLAttrXRef("mozallowfullscreen", "iframe") }} attribute ({{ HTMLAttrXRef("webkitallowfullscreen", "iframe") }}, etc) in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a {{ domevent("mozfullscreenerror") }} event. When a fullscreen request fails Firefox will log an error message to the Web Console explaining why the request failed.</p>
<h2 id=".E5.8F.96.E6.B6.88.E5.85.A8.E5.B1.8F.E6.A8.A1.E5.BC.8F">取消全屏模式</h2>
<p>The user always has the ability to exit fullscreen mode of their own accord; see {{ anch("Things your users want to know") }}. You can also do so programmatically by calling the <code>cancelFullscreen()</code> method; this is implemented in Gecko as <a href="/en/DOM/document.mozCancelFullScreen" title="document.mozCancelFullScreen"><code>mozCancelFullScreen()</code></a> and WebKit as <code>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>The {{ domxref("document") }} provides some additional information that can be useful when developing fullscreen web applications:</p>
<dl>
  <dt>
    {{ domxref("document.mozFullScreenElement", "fullscreenElement") }}</dt>
  <dd>
    The <code>fullscreenElement</code> attribute tells you the {{ domxref("element") }} that's currently being displayed fullscreen. If this is non-null, the document is in fullscreen mode. If this is null, the document is not in fullscreen mode.</dd>
  <dt>
    {{ domxref("document.mozFullScreenEnabled", "fullscreenEnabled") }}</dt>
  <dd>
    The <code>fullscreenEnabled</code> attribute tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.</dd>
</dl>
<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">站点使用者会需要知道的事儿</h2>
<p>You'll want to be sure to let your users know that they can press the ESC key (or F11) to exit fullscreen mode.</p>
<p>In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.</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">
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>This code is called when the user hits the Enter key, as seen above.</p>
<pre class="brush: js">
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>This starts by looking at the value of the <code>fullscreenElement</code> attribute on the {{ domxref("document") }} (checking it prefixed with both <code>-moz-</code> and <code>-webkit-</code>). If it's <code>null</code>, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either {{ domxref("element.mozRequestFullScreen()") }} or <code>webkitRequestFullscreen()</code>, depending on which is available.</p>
<p>If fullscreen mode is already active (<code>fullscreenElement</code> is non-<code>null</code>), we call {{ domxref("document.mozCancelFullScreen()") }} or <code>webkitCancelFullScreen()</code>, again depending on which browser is in use.</p>
<h2 id="Specification" name="Specification">浏览器兼容性</h2>
<p>Although both Gecko and WebKit implement a draft of this API, there are some subtle differences. This document doesn't necessarily try to call them all into focus. The article will be revised as the spec and implementations fall closer into alignment with one another.</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>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>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>Although this API was introduced in Gecko 9.0 {{ geckoRelease("9.0") }}, it's not enabled by default in that release. To enable it, set the <code>full-screen-api.enabled</code> preference to <code>true</code>. The API is enabled by default in Gecko 10.0 {{ geckoRelease("10.0") }}. In Gecko all the API is spelt "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>These are some of the methods that browsers implemented before the standard was drafted. Having the standard methods described above it's better to avoid using the following ones:</p>
<ul>
  <li><code>window.fullScreen</code> (Firefox)</li>
  <li><code>HTMLMediaElement.webkitDisplayingFullscreen</code></li>
  <li><code>HTMLMediaElement.webkitEnterFullscreen</code></li>
  <li><code>HTMLMediaElement.webkitExitFullscreen</code></li>
  <li><code>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>
恢复到这个版本