JS 全屏和退出全屏--requestFullScreen详解及兼容代码

在前端开发中，有时我们需要将某个元素或整个页面进入全屏模式，以提供更好的用户体验。在使用 JavaScript 实现全屏操作时，我们可以使用 requestFullScreen 方法来请求将指定的元素或整个文档进入全屏模式。本文将详解 requestFullScreen 方法的用法，并提供兼容性代码。

一、什么是全屏模式

全屏模式指的是当前网页或某个指定元素占据整个浏览器窗口的显示区域，屏蔽浏览器的地址栏、工具栏以及其他控制元素，实现全屏展示。

二、requestFullScreen 详解及用法

requestFullScreen 是一个方法，可以用于将指定的元素或整个文档进入全屏模式。使用 requestFullScreen 方法只需简单调用即可。

1. 将整个文档进入全屏模式

调用 document.documentElement.requestFullScreen() 可以将整个文档进入全屏模式。

document.documentElement.requestFullScreen();

2. 将指定元素进入全屏模式

首先需要获取要全屏的元素，然后调用该元素的 requestFullScreen() 方法，即可将该元素进入全屏模式。

var elem = document.getElementById("myElement");
elem.requestFullScreen();

三、requestFullScreen 兼容代码

要实现跨浏览器兼容，我们需要使用不同的方法来请求全屏。以下是一个只考虑 Chrome、Firefox 和 Safari 的兼容代码示例。

var elem = document.getElementById("myElement");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

四、退出全屏模式

要退出全屏模式，使用的方法是 exitFullScreen()。以下是退出全屏模式的代码示例。

function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

五、总结

本文介绍了全屏模式的概念以及如何使用 JavaScript 中的 requestFullScreen 方法将元素或整个文档进入全屏模式。同时，我们还提供了适用于 Chrome、Firefox 和 Safari 的兼容性代码示例。在实际应用中，根据不同的浏览器，可能需要综合考虑更多的兼容性处理。全屏模式可以为用户提供更好的使用体验，使网页或应用更加引人注目。

本文来自极简博客，作者：算法架构师，转载请注明原文链接：JS 全屏和退出全屏--requestFullScreen详解及兼容代码