HTML5全屏(Fullscreen)API详尽详细介绍

日期:2021-02-24 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

在愈来愈真正的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吧 —— 在将来的某个時刻,它毫无疑问会派上用处!

上一篇:3种方法完成瀑布流合理布局小结 返回下一篇:没有了