[译]HTM5 Full-Screen API 怎么玩 - -

2014-05-10 #HTML5 #Full-Screen #全屏 #Coding

如果你不喜欢改变，那么你可能并不适合干web开发这行。我曾经在2012年底发表过Full-Screen API，当时我表示一些实现细节应该修改下，不过我从来没想过一年之后我得重新写一版！这也许不是最后一版，不过我需要感谢David Storey给我指出了最近技术方法的发展方向…

Full-Screen API 是个啥

这个API允许一个元素用全屏方式来展示。不过并不是你去按F11来强制你的浏览器进入全屏模式，这个API可以用于运行在容器中的图片、视频和游戏。当你进入全屏模式时，用户会接到一条信息来告诉他们能按ESC在任何时间返回原来页面。

Full-Screen API 现在已经支持了包括IE11在内的大部分桌面浏览器（译者：联想到天朝苦比的IE6等占有率）。对移动端也有部分支持，不过他们基本都已经泡在全屏模式下了。别高兴的太早，很不幸我们还有一些差别微调、浏览器前缀以及不同浏览器的兼容性需要解决…

The JavaScript API

假设我们有张图片ID是myimage想要在全屏模式下展示。所需要用到的主要方法和属性如下：

document.fullscreenEnabled

当document允许全屏模式时候，这个属性会返回true。这玩意也能拿来检查浏览器是否支持全屏API：

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

早些时候这个接口实现的属性上是大写字母‘S’在‘Screen’，而且Firefox中仍然需要大写。下面是加上跨浏览器支持的代码：

// full-screen available?
if (
    document.fullscreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {
...
}

Opera 12 是唯一一个不需要prefix的浏览器，不过Opera 15+ 得使用webkit。

element.requestFullscreen()

这个方法可以让单个元素进入全屏模式，举个栗子：

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

‘screen’ 首字母是小写。跨浏览器版本：

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

这个属性会返回当前被全屏显示的元素或者null（非全屏时）：

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

‘screen’是小写。跨浏览器版本：

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

document.exitFullscreen()

这个方法可以退出全屏模式：

1	if (document.fullscreenElement) { ... }

‘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 `event`

这个事件会在进入或者退出全屏模式时候触发。这个事件没有返回什么信息，如果你要检查当前是否为全屏模式，其实你可以用document.fullscreenElement不是null来检查是否全屏模式。

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

这名字一直没变过，不过还需要做些跨浏览器处理：

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

document.fullscreenerror `event`

全屏模式也有失败状态。举个栗子，iframes没有allowfullscreen属性或者有些插件等东西会阻止全屏模式。一个fullscreenerror事件因此会被触发.

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

这名字一直没变过，不过还需要做些跨浏览器处理：


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

Full-Screen CSS

我们也能用CSS来影响全屏样式

:fullscreen `伪类`

你可以使用这个伪类来改变一个元素或者他的子元素在全屏模式中的的样式：

1
2
3

:fullscreen {
    ...
}

这玩意以前叫:full-screen，而且在webkit内核浏览器和Firefox中还这么叫。跨浏览器代码：

:-webkit-full-screen {
}
 
:-moz-full-screen {
}
 
:-ms-fullscreen {
}
 
:fullscreen {
}

（译者：多使用SASS之类的 CSS预处理语言来解决这些蛋疼的prefix把）

::backdrop

你也可以用这个属性来给一个元素在全屏模式中设置一个不一样的单色或者图片遮罩背景：

1
2
3

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

backdrop是一个在全屏元素之下、页面之上的伪元素。IE11支持，Firefox 和 Opera 12不支持。Chrome、Safari、Opera 15+都支持但是并不允许去修改。所以目前你只能在IE11中使用，举个栗子：

1
2
3

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

样式差异

在IE11，Firefox，Opera 12中全屏的元素会被设置成 100%的宽高。图片隐藏被拉伸、原始的宽高比也被忽略了。

在IE11中设置一个宽高属性会把全屏元素放到一个暗色的背景（可以使用::backdrop设置）中并基于浏览器左上角。
Opera 12和IE11的展现方式很像，不过是个透明的背景。
Firefox忽略尺寸大小。

Chrome、Safari、Opera 15+中元素都被居中放置在一个黑色的背景中。

如果你想保持一致性，那么让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不管用，就像之前提到那样他忽略了宽高设置。怎么解决那，你需要把父级元素设置成全屏模式，然后做出适当的调整就像demo这样.

准备好开搞了？

HTML5 Full-Screen API相当的简单，不过为了解决浏览器兼容性问题还需要写一大坨很丑的代码，而且谁也不能保证这些浏览器各种API不会再次修改。这种情况以后应该会有所改善，所以在API稳定前把时间和精力投入到其他功能上是个更好的选择。

最后，全屏模式对于HTML5游戏和视频网站来说是必不可少的。如果你不想自己去维护这些代码，考虑使用一些第三方的库把，screenfull.js就是一个不错的选择。

Best of luck!

原文地址：http://www.sitepoint.com/use-html5-full-screen-api/ 略有修改

所译文章遵守 CC协议如有侵权之处请联系我