HTML5 全屏 API

注：提 HTML5 只是说明他是一项新的东西，至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套？我们不纠结。不如看这个接口能给我带来什么，思考可以如何给网页做个体验上的增强应用吧。

一、说在前面的

其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个，在 iPhone 上访问 youku 上的一个视频：

 

我们可以点击中间这个大大的放映按钮，这里 iOS 里的 safari 会把影片全屏显示，使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图：

 二、FullScreen JavaScript API 具体使用

1、JavaScript API

FullScreen Javascript API 目前仍是草案，实现这个 API，更确切来说是具有这项功能的浏览器有：Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用，我们可以先看看下面的代码：

// Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox (works in nightly) element.mozRequestFullScreen(); document.mozCancelFullScreen();   // W3C 提议 element.requestFullscreen(); document.exitFullscreen(); 

只有两个方法，在需要调用全屏的元素调用 requestFullscreen() 方法，在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大，只是命名上的不同。

只是，厂商前缀，各浏览器的实现和 W3C 不一致，代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点，红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的，何必改掉命名。既然发，为什么不把 request 发成 enter 与 exit 对应？！。无论如何，至少可以实现，目前 IE 仍没有决定要不要实现这个草案，Johndyer 这样说：“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~

在这里吐槽也没什么用，我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提，只是略过，这一段来自 Johndyer 的代码，使用的是 Mozilla 的提案，具体使用还需要具体对待：

// Webkit-base: element.onwebkitfullscreenchange // Firefox: element.onmozfullscreenchange  // W3C Method: element.addEventListener('fullscreenchange', function(e) {     if (document.fullScreen) {        /* make it look good for fullscreen */     } else {        /* return to the normal state in page */     } }, true);

2. CSS 选择器：:fullscreen / :fullscreen-ancestor

这两个选择器的作用是这样的：

• :fullscreen – 当前全屏化的元素
• :fullscreen-ancestor – 所有全屏化元素的祖先元素

对于 :fullscreen 还是比较好理解的，但对于 fullscreen-ancestor 要选出它的全家，而不仅仅是父节点，似乎不能理解其他使用。其实，看一下官方草案提供的 Demo 代码，就知道了：可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢？这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧：

:fullscreen {   position:fixed;   top:0;   left:0;   right:0;   bottom:0;   z-index:2147483647;   background:black;   width:100%;   height:100%; } /* If there is a fullscreen element that is not the root then    we should hide the viewport scrollbar. */ :fullscreen-ancestor:root {   overflow:hidden; } :fullscreen-ancestor {   /* Ancestors of a fullscreen element should not induce stacking contexts      that would prevent the fullscreen element from being on top. */   z-index:auto;   /* Ancestors of a fullscreen element should not be partially transparent,      since that would apply to the fullscreen element and make the page visible      behind it. It would also create a pseudo-stacking-context that would let content      draw on top of the fullscreen element. */   opacity:1;   /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or      filtering, since that would affect the fullscreen element and create a pseudo-      stacking context. */   mask:none;   clip:none;   filter:none;   transform:none; } 

 3. HTML 标签属性: allowFullScreen

像 flash 使用的 <object> 和 <embed> 可以设置是否允许全屏，现在这个特性同样可以应用于 <iframe> 标签。只要添加 allowFullScreen 属性即可：

<!-- content from another site that is allowed to use the fullscreen command --> <iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""></iframe>

三、解决方案

一般来说，全屏主要应用还是在视频和游戏。当然，也可以实现像 Mac Lion 一样的全屏显示，就像 Preview.app，全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持)，Chrome 15， Safari 5.1 可以使用 Johndyer 的 jQuery 插件：https://gist.github.com/1354468

四、总结

目前遇到的问题可能是：

1. IE 对这个功能的实现没有安排
2. 全屏在 Mac 下是浏览器全屏还是内置实现的全屏？Chrome 实现的是 Lion 内置的全屏，而 Safari 本身实现的是浏览器自身的全屏。
3. 安全问题，全屏下伪造一个系统登陆框？
4. 是否所有元素都应该被全屏内容盖住？

似乎第 1 点和第 3 点是我们比较关注的，也需要去关注的。反而对于 API 的调用是比较简单的，不需要那么多思考。

引用 DEMO: Fullscreen JavaScript API

五、引用文档

1. 参考事件的处理：Let Your Content Do the Talking: Fullscreen API 
2. 大部分代码引用这篇文章：Native Fullscreen JavaScript API (plus jQuery plugin) 
3. 历史和讨论：Fullscreen HTML5 video 
4. 标准与厂商对比：W3C Draft: Fullscreen