JavaScript实现页面全屏|极客笔记

JavaScript实现页面全屏

在网页开发中，有时候我们需要让页面全屏显示，以提供更好的用户体验。在这篇文章中，我们将介绍如何使用JavaScript来实现页面全屏功能。我们将从如何检测浏览器是否支持全屏功能开始，然后介绍如何请求全屏以及退出全屏。

检测浏览器是否支持全屏功能

在使用全屏功能之前，我们需要先检测浏览器是否支持全屏功能。我们可以使用document.fullscreenEnabled属性来检测当前浏览器是否支持全屏功能。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Check Fullscreen Support</title>
</head>
<body>
<script>
if (document.fullscreenEnabled) {
  console.log('Fullscreen is supported');
} else {
  console.log('Fullscreen is not supported');
}
</script>
</body>
</html>

在上面的示例代码中，我们通过document.fullscreenEnabled属性来检测当前浏览器是否支持全屏功能。如果支持全屏功能，则会在控制台输出Fullscreen is supported，否则输出Fullscreen is not supported。

请求全屏

一旦我们确定浏览器支持全屏功能，我们就可以请求全屏显示。我们可以使用requestFullscreen()方法来请求全屏显示。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Request Fullscreen</title>
</head>
<body>
<button onclick="requestFullscreen()">Request Fullscreen</button>
<script>
function requestFullscreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过点击按钮来请求全屏显示。当按钮被点击时，会调用requestFullscreen()函数，该函数会请求document.documentElement元素全屏显示。

退出全屏

除了请求全屏显示，我们还可以退出全屏显示。我们可以使用exitFullscreen()方法来退出全屏显示。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exit Fullscreen</title>
</head>
<body>
<button onclick="exitFullscreen()">Exit Fullscreen</button>
<script>
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过点击按钮来退出全屏显示。当按钮被点击时，会调用exitFullscreen()函数，该函数会退出当前全屏显示状态。

监听全屏状态变化

除了请求全屏和退出全屏，我们还可以监听全屏状态的变化。我们可以使用fullscreenchange事件来监听全屏状态的变化。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen Change</title>
</head>
<body>
<p id="fullscreen-status">Fullscreen Status: </p>
<script>
document.addEventListener('fullscreenchange', function() {
  const fullscreenStatus = document.fullscreenElement ? 'Fullscreen' : 'Not Fullscreen';
  document.getElementById('fullscreen-status').textContent = 'Fullscreen Status: ' + fullscreenStatus;
});
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过监听fullscreenchange事件来获取全屏状态的变化。当全屏状态发生变化时，会更新页面上的<p>元素来显示当前的全屏状态。

全屏元素

除了请求整个页面全屏显示，我们还可以请求某个元素全屏显示。我们可以使用requestFullscreen()方法来请求某个元素全屏显示。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Request Element Fullscreen</title>
<style>
#fullscreen-element {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="fullscreen-element">
  <button onclick="requestElementFullscreen()">Request Element Fullscreen</button>
</div>
<script>
function requestElementFullscreen() {
  const element = document.getElementById('fullscreen-element');
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过点击按钮来请求<div>元素全屏显示。当按钮被点击时，会调用requestElementFullscreen()函数，该函数会请求<div>元素全屏显示。

全屏错误处理

在使用全屏功能时，可能会出现一些错误。我们可以使用fullscreenerror事件来监听全屏错误。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen Error</title>
</head>
<body>
<button onclick="requestFullscreen()">Request Fullscreen</button>
<script>
document.addEventListener('fullscreenerror', function() {
  console.log('Fullscreen Error');
});
function requestFullscreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过监听fullscreenerror事件来处理全屏错误。当全屏请求出现错误时，会在控制台输出Fullscreen Error。

全屏兼容性

在使用全屏功能时，我们需要考虑不同浏览器的兼容性。不同浏览器可能会有不同的前缀，我们需要根据不同浏览器来调用相应的方法。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen Compatibility</title>
</head>
<body>
<button onclick="requestFullscreen()">Request Fullscreen</button>
<script>
function requestFullscreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏

在上面的示例代码中，我们通过检测不同浏览器的前缀来调用相应的全屏方法，以确保在不同浏览器中都能正常使用全屏功能。

全屏事件

除了fullscreenchange事件外，还有其他一些与全屏相关的事件可以监听。例如fullscreenerror事件、fullscreenenabled事件和fullscreendisabled事件。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen Events</title>
</head>
<body>
<p id="fullscreen-status">Fullscreen Status: </p>
<button onclick="requestFullscreen()">Request Fullscreen</button>
<script>
document.addEventListener('fullscreenchange', function() {
  const fullscreenStatus = document.fullscreenElement ? 'Fullscreen' : 'Not Fullscreen';
  document.getElementById('fullscreen-status').textContent = 'Fullscreen Status: ' + fullscreenStatus;
});
document.addEventListener('fullscreenerror', function() {
  console.log('Fullscreen Error');
});
document.addEventListener('fullscreenenabled', function() {
  console.log('Fullscreen Enabled');
});
document.addEventListener('fullscreendisabled', function() {
  console.log('Fullscreen Disabled');
});
function requestFullscreen() {
  const element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}
</script>
</body>
</html>

代码运行结果:

JavaScript实现页面全屏