在愈来愈真正的web运用程序流程中,JavaScript也变得愈来愈给力.
FullScreen API 是1个新的JavaScript API,简易而又强劲. FullScreen 让大家能够根据程序编写的方法来向客户恳求全屏显示信息,假如互动进行,随时能够撤出全屏情况.
线上演试Demo: Fullscreen API Example
(在此Demo中，能够Launch ,Hide ,和Dump显示信息有关特性,能够根据chrome的操纵台查询系统日志信息内容.)
起动全屏方式
全屏API requestFullscreen方式在1些老的访问器里边仍然应用带前缀方式的方式名,因而将会必须开展检验分辨:
(带前缀,意思便是各个访问器核心堵塞用.)
// 寻找适用的方式, 应用必须全屏的 element 启用
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 在适用全屏的访问器中起动全屏
// 全部网页页面
launchFullScreen(document.documentElement);
// 某个元素
launchFullScreen(document.getElementById("videoElement"));
将必须全屏显示信息的DOM元素做为主要参数,启用此方式便可让window进到全屏情况,有时将会必须客户愿意(访问器自身和客户互动),倘若客户回绝,则将会出現各种各样不彻底的全屏.
假如客户愿意进到全屏,那末专用工具栏和别的访问器组件会掩藏起来,使document架构的宽度和高宽比横跨全部显示屏.
撤出全屏方式
应用 exitFullscreen 方式可使访问器撤出全屏,回到本来的合理布局. 该方式在1些老的访问器上也是适用前缀方式.
// 撤出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// 启用撤出全屏方式!
exitFullscreen();
请留意: exitFullscreen 只能根据 document 目标启用 —— 而并不是应用一般的 DOM element.
Fullscreen 特性与恶性事件
1个坏信息,到现阶段为止,全屏恶性事件和方式仍然是带前缀的,好信息便是很快流行访问器就会都适用。
1.document.fullscreenElement: 当今处在全屏情况的元素 element.
2.document.fullscreenEnabled: 标识 fullscreen 当今是不是能用.
当进到/撤出 全屏方式时,会开启 fullscreenchange 恶性事件:
var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;
在原始化全屏方式时,能够检测必须监视哪个恶性事件.
Fullscreen CSS
访问器出示了1些有效的 fullscreen CSS 操纵标准:
/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties */
}
:fullscreen {
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop */
::backdrop {
/* properties */
}
在一些状况下,WebKit必须1些独特解决,因此在解决多新闻媒体时,你将会必须上面的编码。
我觉得 Fullscreen API 非常简易,非常有效. 我初次见到这个 API 是在1个名为 MDN's BananaBread demo 的全顾客端第1人称射击手机游戏, 这简直1个应用全屏方式的绝佳实例。
全屏API出示了进到和撤出全屏方式的方法,并出示相应的恶性事件来监测全屏情况的更改,因此各层面都连贯性起来了.
请记牢这个很好的API吧 —— 在将来的某个時刻,它毫无疑问会派上用处!
