基于元素launchFullScreen的调用functionlaunchFullScreen

2022-07-05

// 整个页面

onclick= launchFullScreen(document.documentElement);

// 某个元素

launchFullScreen(document.getElementById(“videoElement”));

// 找到支持的方法, 使用需要全屏的 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();

}

}

// 退出 fullscreen

function exitFullscreen() {

if(document.exitFullscreen) {

document.exitFullscreen();

} else if(document.mozExitFullScreen) {

document.mozExitFullScreen();

} else if(document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}

// 调用退出全屏方法!

exitFullscreen();

Fullscreen 属性与事件

一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。

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

浏览器提供了一些有用的 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 */

}

分类：

技术点：

相关文章：