JS 浏览器全屏|极客笔记

JS 浏览器全屏

在网页开发中，有时候我们可能需要让网页全屏显示，以提供更好的用户体验。通过JavaScript来实现浏览器全屏功能是一种常见的做法。在本文中，我们将详细讨论如何使用JavaScript来实现网页全屏功能。

一、浏览器全屏的基本概念

在进行浏览器全屏的操作前，我们首先来了解一下浏览器全屏的基本概念。

浏览器全屏是指将整个浏览器窗口的内容都展示在屏幕上，用户无法看到操作系统的窗口边框、菜单栏等内容，从而获得更加沉浸式的浏览体验。在全屏模式下，网页将占据整个屏幕空间，使得用户可以更加专注于网页内容。

二、使用JavaScript实现浏览器全屏

下面我们将介绍如何使用JavaScript来实现浏览器全屏功能。在浏览器中，有一个专门的API供我们调用来实现全屏功能，这就是requestFullscreen方法。

1. 获取全屏元素

在进行全屏操作之前，我们需要先获取一个DOM元素，该元素将被显示为全屏模式。一般情况下，我们会选择整个<html>或<body>元素作为全屏元素。我们可以使用document.documentElement来获取<html>元素。

const elem = document.documentElement;

2. 进入全屏

一旦我们有了全屏元素，就可以调用该元素的requestFullscreen方法来使其进入全屏模式：

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
  elem.msRequestFullscreen();
}

以上代码中，我们先判断了浏览器是否支持requestFullscreen方法，如果支持则直接调用该方法；否则，我们再分别判断是否支持webkitRequestFullscreen（Safari浏览器），以及msRequestFullscreen（IE11浏览器），然后调用对应的方法。

3. 退出全屏

如果我们需要退出全屏模式，只需要调用document.exitFullscreen方法：

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
  document.msExitFullscreen();
}

同样地，我们也要根据浏览器的不同分别调用对应的方法。

三、示例代码

下面我们给出一个完整的示例代码，用于实现点击按钮时网页进入全屏模式，再次点击按钮时退出全屏模式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Demo</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
</style>
</head>
<body>
  <button id="fullscreen">Fullscreen</button>

  <script>
    const fullscreenBtn = document.getElementById('fullscreen');

    fullscreenBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
          .catch(err => alert(`Error attempting to enable full-screen mode: ${err.message}`));
      } else {
        document.exitFullscreen();
      }
    });
  </script>
</body>
</html>

在上面的示例代码中，我们创建了一个按钮，当用户点击该按钮时，会切换网页全屏模式。点击一次进入全屏，再次点击退出全屏。