作者 在创建特殊的最终用户体验方面，一项非常重要的功能是能够以全屏方式显示内容，有效地隐藏所有其他内容等。
还记得网站曾经教你如何配置你的网页浏览器隐藏工具栏等，以获得更好的用户体验吗？或者可能只是我… :-)
无论如何，一段时间前，我们在网页浏览器中获得了全屏支持，用户可以选择以全屏方式查看当前网站。这很好，但作为扩展，作为网页开发者，我们希望能够触发它。无论是针对整个网站还是特定元素。
现在我们可以了！
请求全屏
我们现在可以使用名为 requestFullScreen 的方法，目前已在 Firefox、Google Chrome、Safari 和 Internet Explorer 中实现。因此，为了使其目前能够工作，我们需要以下代码
请注意，W3C 规范中的全屏标准 在所有方法中都使用小写字母“s”，而 Firefox、Google Chrome 和 Safari 使用大写字母。
上面的代码只是获取对 documentElement 的引用并请求将其以全屏方式显示。当然，您也可以只使某个特定元素全屏，例如视频，对您希望使用的元素调用相同的方法。
取消全屏
如果要取消全屏状态，需要在文档元素上调用它
请注意，命名方面存在差异，在某些实现中是关于退出状态，在其他实现中是取消状态。
检测全屏状态更改
例如，用户可以退出全屏，这可能对您来说很重要。为此，我们有一个 fullscreenchange 事件，您可以将其应用于请求全屏的元素，也可以应用于文档。然后我们只需检测全屏状态并相应地采取行动，如下所示
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);
全屏样式
在 CSS 中，我们获得了一些用于设置全屏元素样式的伪类。最可靠的是用于全屏，并在文档/元素处于全屏模式时自动触发
html:-webkit-full-screen {
background: red;
}
html:-ms-fullscreen {
background: red;
width: 100%; /* IE 中需要居中内容 */
}
html:fullscreen {
background: red;
}
请注意，W3C 方法在“full”和“screen”之间不使用连字符。
还应补充一点，Firefox 是唯一一个将宽度和高度设置为 100% 的网页浏览器，因为我们认为这是期望的行为。当然，可以使用上述 CSS 覆盖此行为。
带键盘输入的全屏
出于安全原因，大多数键盘输入在全屏模式下都被阻止了。但是，在 Google Chrome 中，您可以通过使用标志调用方法来请求键盘支持
docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
这在 Safari 中不起作用，并且不会调用该方法。
对于 Firefox，我们正在讨论和研究如何添加键盘输入支持而不会危及最终用户安全性的各种方法。一个尚未实施的建议是 requestFullscreenWithKeys 方法，该方法反过来会触发对用户的某些通知。
网页浏览器支持
此功能目前在 Firefox 测试版 中可用，但预计将在明天的 Firefox 10 正式版中发布！它还从版本 15 开始在 Google Chrome 中可用，从 5.1 开始在 Safari 中可用，从版本 11 开始在 Internet Explorer 中可用。
体验全屏！
我有一个 全屏 API 演示 供您体验，所有代码都可在 GitHub 上的全屏存储库 中找到。
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 的技术布道师和编辑。发表关于 HTML5、JavaScript 和开放网络的演讲和博客。Robert 是 HTML5 和开放网络的坚定支持者，自 1999 年以来一直从事网页前端开发工作 - 在瑞典和纽约市。他还定期在 http://robertnyman.com 上发布博客，并且喜欢旅行和结识新朋友。
92 条评论