HTML5全屏(Fullscreen)API详细介绍

最新推荐文章于 2025-02-23 18:40:01 发布

weixin_30872337

最新推荐文章于 2025-02-23 18:40:01 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lfqcode/p/6164001.html

本文介绍了如何使用JavaScript实现网页元素的全屏显示，并提供了退出全屏的方法。同时，还探讨了不同浏览器对于全屏API的支持情况及如何通过CSS来定制全屏模式下的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 整个页面
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 */
}