HTML5 Fullscreen API html5全屏编程API

时间:2022-12-23 18:06:22

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

 

HTML5 Fullscreen API html5全屏编程API

 

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

 

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