利用 ES10 全屏 API 解决页面全屏问题

在 web 开发中，全屏显示是一个常见的需求。在过去，为了实现全屏显示，我们需要使用一些 hack 方法或者借助第三方库来实现。但现在，在 ES10 中，引入了一个全新的全屏 API，使得全屏显示变得更加简单和方便。本文将介绍如何利用 ES10 全屏 API 来解决页面全屏问题。

ES10 全屏 API 简介

ES10 全屏 API 是一组用于全屏显示的 JavaScript API，它包含了一系列方法和事件，可以使我们轻松地在页面中实现全屏显示功能。

这些方法和事件主要包括：isFullScreen（用于判断当前页面是否处于全屏状态）、requestFullscreen（用于请求进入全屏状态）、exitFullscreen（用于退出全屏状态）以及 fullscreenchange（用于监测全屏状态的改变）等。

如何使用 ES10 全屏 API

下面介绍如何使用 ES10 全屏 API 来实现页面全屏。

请求进入全屏状态

首先，我们需要使用 requestFullscreen 方法来请求进入全屏状态。这个方法可以应用到任何 DOM 元素上，使得该元素及其子元素可以进入全屏状态。示例如下：

const element = document.querySelector('#fullScreenElement');

element.requestFullscreen().catch(err => {
  console.log(`Error: ${err}`);
});

在这个示例中，我们将选择器 #fullScreenElement 选择的元素请求进入了全屏状态，并通过 catch 方法监测了可能出现的错误。

退出全屏状态

要退出全屏状态，我们可以使用 exitFullscreen 方法。该方法可以被任何元素调用，使得该元素及其祖先元素退出全屏状态。示例代码如下：

document.exitFullscreen().catch(err => {
  console.log(`Error: ${err}`);
});

监测全屏状态的改变

我们可以使用 fullscreenchange 事件来监测全屏状态的改变，从而根据需要决定可以执行的操作。示例代码如下：

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log(`Element entered fullscreen mode.`);
  } else {
    console.log(`Element exited fullscreen mode.`);
  }
});

在这个示例中，我们向 fullscreenchange 事件绑定了一个回调函数，该回调函数会在全屏状态改变时被触发，判断当前是否处于全屏状态，并输出相应的信息。

ES10 全屏 API 的浏览器兼容性

虽然 ES10 全屏 API 提供了一种简单方便的全屏显示方法，但它不完全具有跨浏览器的兼容性。

目前，Chrome、Firefox 和 Safari 以及一些移动设备浏览器支持 ES10 全屏 API。但像 Internet Explorer 和 Edge 旧版等一些主流浏览器并不支持。因此，在应用 ES10 全屏 API 时，我们需要特别注意浏览器的兼容性问题。同时，我们也可以借助第三方库来解决这个问题。

总结

ES10 全屏 API 提供了一种轻松实现全屏显示的方法，在需要实现全屏显示时可以考虑使用。但尽管如此，由于其在一些主流浏览器上的兼容性问题，我们在使用 ES10 全屏 API 时还需要特别注意浏览器的兼容性问题，或通过使用第三方库来解决。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a751c48841e989489749b