Web 中 JavaScript 全屏 API 介绍和使用

随着我们的 Web 应用程序向原生的 APP 靠拢，应用的全屏展示需求也比较多，而 JavaScript 也正在努力的实现这个功能，JavaScript 全屏 API 提供了一种编程方式向用户请求全屏显示和退出全屏，下面是如何使用这个非常简单的全屏 API。

启动全屏模式

全屏 API 的 requestFullscreen 任然需要高级浏览器的支持，所以在使用的时候我需要做到兼容性检查，不同的浏览器可能接口并不一样。

// Find the right method, call on correct element
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Launch fullscreen for browsers that support it!
launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("videoElement"));
// any individual element

简单的调用请求的方法，可能有些浏览器会出现一个警告，等待用户确认或者拒绝，然后再显示全屏效果，这时候浏览器的地址栏、标签页和系统的任务都将会隐藏，网页的宽度和高度将缩放到当前屏幕的大小。

退出全屏模式

调用 exitFullscreen 方法即可退出全屏模式，或者用户在键盘上按下 Esc 按键也可以退出全屏。

// Whack fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

注意： exitFullscreen 是一个文档对象，可以直接调用，而不需要再 document 上调用。

全屏的属性和事件

目前来说，调用这些方法和事件还是需要加上浏览器前缀，不过随着时间的推移，更多的浏览器厂商将支持这些 API，那时候我们的就不需要前缀了，代码将更加的简洁。

• document.fullScreenElement ：元素已经是全屏展示了。
• document.fullScreenEnabled ：如果当前启用全屏。

fullscreenchange 事件让我们知道，当前我们应该是去请求全屏模式还是退出全屏模式：

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你可以检测浏览器前缀事件使用随着初始全屏方法检测。

全屏 CSS 样式

浏览器做为我们提供一个有用的点全屏 CSS 控制：

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

在某些情况下，它需要一点帮助，所以上面的代码应该是如果你面对媒体一直得心应手。

最后总结

全屏 API 是超级简单、超级有用的，全屏 API 提供了一种方式进入和退出全屏模式，以及事件检测全屏状态的变化，所以所有的基础上。把这个好的 API 牢记在心，这对你未来的事业是很有用的！

示例： https://www.wenjiangs.com/public/uploads/2025/fullpage.html