JavaScript 控制浏览器全屏和退出全屏

在Web开发中，有时候我们需要通过 JavaScript 来控制浏览器的全屏模式。这对于视频播放器、幻灯片演示和游戏等场景非常有用。本文将详细介绍如何使用 JavaScript 实现浏览器的全屏和退出全屏功能。

进入全屏

要进入全屏模式，我们首先需要获取一个元素，然后调用该元素的 requestFullscreen() 方法。

const element = document.documentElement; // 获取整个文档的元素
 
if (element.requestFullscreen) { // 标准写法
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox 浏览器
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome 和 Safari
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
  element.msRequestFullscreen();
}

以上代码首先获取整个文档的根元素(document.documentElement)，然后检查浏览器是否支持标准的 requestFullscreen() 方法，如果不支持，则依次尝试使用不同浏览器的特定方法。

退出全屏

要退出全屏模式，我们可以调用 document 对象的 exitFullscreen() 方法或者调用当前全屏元素的 exitFullscreen() 方法。

下面是使用 JavaScript 退出全屏的示例代码：

if (document.exitFullscreen) { // 标准写法
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox 浏览器
  document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome 和 Safari
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11
  document.msExitFullscreen();
}

 以上代码首先检查浏览器是否支持标准的 exitFullscreen() 方法，如果不支持，则依次尝试使用不同浏览器的特定方法。

兼容性注意事项
需要注意的是，不同浏览器对于全屏功能的实现可能存在细微差异，因此我们需要使用兼容性写法来覆盖多种浏览器。在编写全屏代码时，建议同时检查并使用多种浏览器的 API，以确保在不同浏览器上都能正常工作。