【记录】监听浏览器是否全屏（包括F11/ESC键）

查的资料关于全屏状态下浏览器对F11和ESC键的处理（本章解决方案）

资料说明：在全屏状态下，某些浏览器会阻止或限制直接监听F11键和ESC键的按下事件，这是为了防止恶意脚本滥用全屏模式，比如强制用户留在全屏状态。

也就是说，按 F11 和 ESC两个按键无法监听和获取到是否全屏这个状态，但手动调用浏览器的 “进入全屏” 和 “退出全屏” 两个API方法可以被监听到。这样就好办了。

1、我们可以通过获取屏幕分辨率，和HTML文档高度的方式间接来判断的当前是否为全屏。

2、监听 F11 和 ESC 按下，阻止其默认事件，然后获取分辨率和文档高度做判断分辨当前是否全屏。

知道状态后，手动去调用全屏和退出全屏的API方法即可。但需要注意的一点是，全屏状态下HTML的高度，因为不同浏览器，不同的设置也会出现浏览器边框这个高度。和分辨率高度并非完全一致。

一般不会太多，为了保险起见判断个 100px，用分辨率 - 文档高度，小于 100 说明当前为全屏状态。

以下是实现。

头部引入

import { launchFullscreen, exitFullscreen } from '@/utils/index'

/* utils文件中 */
//开启浏览器全屏
export const launchFullscreen = () => {
  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()
  }
}

// 关闭浏览器全屏
export const exitFullscreen = () => {
  if (document?.exitFullscreen) {
    document?.exitFullscreen()
  } else if (document?.mozCancelFullScreen) {
    document?.mozCancelFullScreen()
  } else if (document?.webkitExitFullscreen) {
    document?.webkitExitFullscreen()
  }
}

data

data(){
 return {
   isScreen:null//true全屏、非全屏
  }
}

mounted

mounted(){
    this.init()
}

methods

/* 初始化监听 */
init(){
  this.getFullScreenChange()
    this.addFullScreenListener(this.getFullScreenChange)
    window.addEventListener('keydown', (event) => {
      this.handleKeyDown(event)
      if (['F11', 'Escape'].includes(event.code)) {
        this.getWinHeight()
        event.preventDefault()
      }
    })
},
/* 是否全屏 */
isFullScreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  )
},
/* 全屏监听事件 */
addFullScreenListener(callback) {
  const eventArrs = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
  eventArrs.forEach((item) => document.addEventListener(item, callback))
  return () => eventArrs.forEach((item) => document.removeEventListener(item, callback))
},
/* 移除监听事件--反正都全局的不移除其实也行 */
removeFullScreenListener() {
  document.removeEventListener('keydown', this.handleKeyDown)
},
/* 获取全屏状态 */
getFullScreenChange() {
  if (this.isFullScreen()) {
    this.isScreen = true
    console.log('已进入全屏')
  } else {
    this.isScreen = false
    console.log('已退出全屏')
  }
},
/* 全屏状态下的监听 */
handleKeyDown(event) {
  if (['Escape'].includes(event.code) && this.isFullScreen()) {
    exitFullscreen()
  }
},
/* 判断全屏高度条件 */
getWinHeight() {
  const winHeight = screen.height
  const domHeight = document.documentElement.clientHeight
  const resHeight = winHeight - domHeight
  if (resHeight < 100) {
    exitFullscreen()
  } else {
    launchFullscreen()
  }
},