HTML5 Fullscreen API html5全屏编程API

原文地址：http://www.javaarch.net/jiagoushi/692.htm

页面要实现全屏预览，需要隐藏浏览器地址栏工具类等组件，那么需要考虑下用户体验。

w3c规范中的fullscreen标准可以查看：http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

当前在firefox，chrome，safari中已经支持这个API。那么我们简单看看这个代码实现：

1.请求全屏 Requesting fullscreen

为了兼容这几个浏览器需要这么写：

var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}

这里各个浏览器的API方法的大小写不一样，w3c规范中建议方法都是小写。这里是把整个docuement请求全屏，我们也可以只针对某个元素需要全屏展示，比如video。

2.取消全屏 Cancelling fullscreen

if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}

w3c中使用exitFullscreen这个API，但是浏览器却都有自己的实现。

3.检查全屏状态变化 Detecting fullscreen state change

document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

4.css的全屏样式 Styling fullscreen

在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效

html:-moz-full-screen {
background: red;
}

html:-webkit-full-screen {
background: red;
}

html:fullscreen {
background: red;
}

5.全屏状态下的键盘输入 Full screen with key input

为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。

firefox10以上，chrome 15和safari5.1以上都支持了。

这是一个demo的地址：http://robnyman.github.io/fullscreen/，还有一个github示例代码：https://github.com/robnyman/robnyman.github.com/tree/master/fullscreen

秒客网

HTML5 Fullscreen API html5全屏编程API

相关文章