![a2cc7cd98d1001e97c71144eb90e7bec54e79725.jpg](http://studygolang.qiniudn.com/151026/8238e4991c18457a6adfd47443401c36.jpg)
所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。这款API十分简单有用,是html5初学者必须掌握的一款API,今天小编就为大家分享分享这款API的具体使用方法。
Full Screen 的介绍
FullScreen API使用非常简单,在html5中,共有两种模式,分别是:
Launching Fullscreen Mode 启动全屏模式
```javascript
// 找到适合浏览器的全屏方法 function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 启动全屏模式
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
Exit FullScreen Mode 退出全屏模式
// Whack fullscreenfunction exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Cancel fullscreen for browsers that support it!
exitFullscreen();
```
Full Screen 的相关属性和事件
虽然,Full ScreenAPI简单易用,但目前 仍存在兼容的问题,许多能使用的浏览器仍需要在其相应的属性和事件加相关的前缀。
【document.fullScreenElement】 该属性表示启动全屏的元素(如 video这些)
【document.fullScreenEnabled】 该属性表示当前是否全屏
【fullscreenchange 事件】 监听全屏状态改变的事件
Full Scrren 相关的css属性
众所周知,说到html,就不得不提css,而fullscreen API 中也有一些关于的css属性:
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop*/::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}
结束语
在屏幕大小有限的移动端,全屏功能显得异常重要,虽然现目前Full Screen API还存在一些兼容问题,但相信这些问题肯定很快会找到解决办法,且这个API肯定也会成为移动互联网时代最常用的API之一。
相关文章:《HTML5学习之页面可见性API》 http://www.maiziedu.com/group/article/7118/
有疑问加站长微信联系(非本文作者)