网页全屏的代码实现要不要了解一下（最全）_浏览器代码实现全屏模式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41461967/article/details/95611420

本文介绍如何使用JavaScript实现网页全屏显示，包括Element.requestFullscreen()方法、Document.exitFullscreen()退出全屏、全屏元素检测及事件监听。同时讨论了全屏模式的兼容性问题和在vue-cli项目中的应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前做过一个项目，有一个模块涉及到很多的图表和数据，于是项目经理要求我写一个全屏显示的代码，把这个模块在浏览器上进行全屏显示，从而看得更清楚一些。

全屏模式可以让web APP拥有本地APP的体验感。

Fullscreen API目前并不是所有浏览器都支持，所以为了解决兼容性问题，需要在一些API上添加前缀。

1. 进入全屏模式的API：Element.requestFullscreen()

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullScreen) {
          ele.webkitRequestFullScreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

ele指的是某一个需要全屏显示的元素，可以是document、div等允许可以被全屏显示的元素。调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件（上面代码有些screen中的“s”要大写）。

在调用requestFullscreen()之前，可以在document对象中对fullscreenchange 和 fullscreenerror事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通