How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）

原文链接：http://www.sitepoint.com/use-html5-full-screen-api/

假设你不太喜欢变化太快的东西，那么web开发可能不适合你。

我曾在2012年末有写过Full-Screen API的介绍，而且当时就提到事实上现细节可能会被改动，可是没有想到一年后我须要重写！本篇的所讲的内容或许不是最新的。可是很感谢David Storey帮我重点归纳出最近技术方面的变化....

什么是Full-Screen API？

此API能够使单个元素全屏显示。

与按下F11键强制浏览器全屏不同，此API的目标是执行在一个容器中的图片，视频和游戏。当进入全屏模式时。将会出现一条信息通知用户可在不论什么时候按ESC键而返回页面。

如今主流的桌面浏览器（包含IE11）都支持此Full-Screen API。移动设备上有少部分支持。可是这些浏览器基本上都是全屏显示的。非常不幸在不同浏览器上的不同细微表现有待我们去解决...

The JavaScript API

如果我们有一个ID为myimage的image，而且我们将让它全屏显示。

那么须要用到的属性和方法有：

document.fullscreenEnabled（已改变)

假设document同意全屏模式，则此属性返回true。它能够用来检測浏览器是否支持全屏模式：

    if(document.fullscreenEnabled){....}

之前的实现中“Screen”的“S”是大写的，而且FireFox仍须要大写。

加入前缀的结果就是产生一大段跨浏览器代码：

//full-sreen available
if(
   document.fullscreenEnable||
   document.webkitFullscreenEnabled||
   document.mozFullScreenEnabled||
   document.msFullscreenEnabled
){
...
}

Opera 12是唯一一个不须要前缀的。除了Opera15+使用webkit.

element.requestFullscreen()（已改变）

此方法可让单独的element全屏，比如：

document.getElementById(“myimage").requestFullscreen();

相同的，"screen"中的"s"变成称过了小写的了。以下是跨浏览器代码：

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
    i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
    i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
    i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
    i.msRequestFullscreen();
}

document.fullscreenElement()（已改变）

此属性返回的是当前为全屏显示的element，当不是全屏时则返回null:

if (document.fullscreenElement) { ... }

"screen"如今是小写的了。

跨浏览器代码例如以下：

// are we full-screen?
if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
) {
...
}

document.exitFullsreen（已改变）

此方法用于取消全屏模式：

document.exitFullscreen;

相同的，”screen"又变成小写的了，之前为cancelFullScreen。fireFox仍使用它。跨浏览器代码例如以下：

// exit full-screen
if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}

document.fullscreenchange 事件

当进入或者退出全屏模式时将触发这个事件。此事件不提供不论什么的信息，可是你能够通过document.fullscreenElement是否为null来推断能否够全屏。

document.addEventListener("fullscreenchange", function() { ... });

这个名字没有改变，可是我们还须要跨平台的前缀和IE的驼峰前缀：

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);

document.fullscreenerror 事件

全屏操作可能会失败。比如iframes没有allowfullscreen属性或者是以窗体形式显示的内容或许会引起冲突。因此一个fullscreenerror或许会被触发：

document.addEventListener("fullscreenerror", function() { ... });

这个名字没有改变，可是我们还须要跨平台的前缀和IE的驼峰前缀：

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);

FUll-Screen CSS

我们也能够在CSS样式中影响全屏...

:fullscreen （pseudo class）伪类（已改变）

你能够将此样式应用到一个一个element或者它的孩子。当它们在全屏模式下显示时才有效：

:fullscreen {
    ...
}

之前的名字为：full-sreen。而且Webkit和fireFox仍让使用它。跨浏览器代码例如以下：

:-webkit-full-screen {
}

:-moz-full-screen {
}

:-ms-fullscreen {
}

:fullscreen {
}

::backdrop（新增）

你能够将颜色和图片背景应用到全屏模式不同分辨率显示下的元素中：

:fullscreen::backdrop {
    background-color: #006; /* dark blue */
}

backdrop是在fullsreen元素后面的伪元素。可是是其它页面上的内容。IE11提供了支持，但那时firefox和Opera12没有.CHrome,Safari和Opera15+包括了backdrop元素，可是不同意给它样式。眼下。你能够仅仅面向IE11。如：

:-ms-fullscreen::-ms-backdrop {
    background-color: #006; /* dark blue */
}

样式差异

在IE11,firefox和Opera12中full-sreen元素被设置成100%宽和高。因此Imagey将会被拉伸，而忽视它的高宽比。在IE11中设置高和宽使全屏元素置于左上角，和一个黑色的背景（::backdrop中配置的）。Opera12和IE11相似，可是背景是透明的。

Firefox忽视它的尺寸。在Chrome，Safari和Opera15+中全屏元素置于一个黑色背景的中央。

假设你想保持一致性。能够使Webkit/Blink 浏览器伸缩至Firefox/IE11那样：

:-webkit-full-screen {
    position: fixed;
    width: 100%;
    top: 0;
    background: none;
}

你也能够让IE11像Webkit/blink那样，使全屏元素置于中央：

:-ms-fullscreen {
  width: auto;
  height: auto;
  margin: auto;
}

此方法不适用于Firefox，由于它忽视width和height，之前提到过。解决的办法就是，你须要让此元素的父元素全屏并应用于适当的尺寸。如：shown
in this demonstration.

Ready for Deployment?

HTML5 Full-Sreen API相对照较简单，可是浏览器的差异性导致非常丑的代码，而且不能保证它们不会再改变。这样的情况会得到改善，所以最好是把大部分时间和精力投入到其它功能和特性上，直到此API变成更稳定些。

这就是说，full-sreen能够用于HTML5游戏和视频站点。假设你不想自己维护代码，你能够使用screenfull.js 这种类库。它能够平滑过渡这些差异，Beast
of Luck!

转载请注明：来至微个日光日

前端技术交流群：139761568