JS 实现全屏和退出全屏

1 背景

在 Web 开发中,全屏模式可以提供更沉浸式的体验,特别适用于视频播放、游戏展示和演示等场景。通过 JavaScript 的 Fullscreen API,我们可以以编程方式控制元素的全屏状态。

Fullscreen API 是一组用于控制全屏显示的方法和属性,它们允许我们将网页内容以全屏的方式展示给用户,并提供了相应的事件来监听全屏模式的变化。

在本文中,我们将介绍如何判断浏览器是否支持全屏功能,如何实现进入全屏和退出全屏的功能,以及如何获取当前全屏元素和监听全屏模式的变化。

注意:Fullscreen API 在不同浏览器之间可能存在差异,请在使用时进行兼容性测试和处理。

2 全屏是否可用

在使用 Fullscreen API 之前,我们需要先判断当前浏览器是否支持全屏功能。可以通过 document.fullscreenEnabled 属性来检查。

以下是一个示例:

1
2
3
4
5
if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled) {
  console.log('浏览器支持全屏功能');
} else {
  console.log('浏览器不支持全屏功能');
}

详细的 API 说明可以参考 Fullscreen API - MDN Web Docs

3 实现全屏

要实现全屏,我们可以使用 requestFullscreen() 方法。该方法可用于 DOM 元素,使其进入全屏模式。

以下是一个示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const element = document.getElementById('my-element');
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // Internet Explorer and Edge
  element.msRequestFullscreen();
}

详细的 API 说明可以参考 Element.requestFullscreen() - MDN Web Docs

4 退出全屏

当我们需要退出全屏时,可以使用 exitFullscreen() 方法。该方法可用于当前处于全屏状态的元素。

以下是一个示例:

1
2
3
4
5
6
7
8
9
if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
  document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // Internet Explorer and Edge
  document.msExitFullscreen();
}

详细的 API 说明可以参考 Document.exitFullscreen() - MDN Web Docs

5 获取全屏元素

在全屏模式下,我们可能需要获取当前处于全屏状态的元素。可以使用document.fullscreenElement属性来获取。

以下是一个示例:

1
2
3
4
5
6
7
const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

if (fullscreenElement) {
  console.log('当前全屏元素:', fullscreenElement);
} else {
  console.log('没有全屏元素');
}

详细的 API 说明可以参考 Document.fullscreenElement - MDN Web Docs

6 监听全屏模式变化

如果我们希望在全屏模式发生变化时得到通知,可以使用 Fullscreen API 提供的事件。

以下是一个示例:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Chrome, Safari and Opera
document.addEventListener('MSFullscreenChange', handleFullscreenChange); // Internet Explorer and Edge

function handleFullscreenChange() {
  if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    console.log('进入全屏模式');
  } else {
    console.log('退出全屏模式');
  }
}

通过添加相应的事件监听器,可以在全屏模式变化时执行自定义的处理函数。

7 相关插件

了解以上 API 后本来已经准备开始写插件了,不过秉承不重复造轮子的思想,找到了以下两个库,基本满足开发需求了。

8 小插曲

document.fullscreendocument.fullscreenElementdocument.fullscreenEnabled 的 MDN 文档中文翻译已过时,然后顺手提了一个 PR mdn/translated-content#15859

9 参考链接

相关内容

Buy me a coffee~
Lruihao 支付宝支付宝
Lruihao 微信微信
0%