元素全屏——Element.requestFullscreen()

全屏用的的比较多的主要是两个：一个是网页本身（document），还有一个是视频（video）。好吧，应该是三个，还有游戏（canvas）。但实际上可以全屏的元素不止这几个，比如 div 就可以（其他的我没看，应该也可以）。

首先，创建一个 div，让其全屏。

let div = document.createElement('div')
div.id = 'fullscreen-div'
div.style.width = '100px'
div.style.height = '100px'
div.style.backgroundColor = 'lightgray'
div.innerHTML = 'div fullscreen'
div.addEventListener('click', handleDivFullScreen)
document.body.appendChild(div)

function handleDivFullScreen() {
  div.requestFullscreen()
    .then(res => {
      console.log(res)
      console.log('success')
    })
    .catch(e => {
      console.log(e)
      console.log('fail')
    })
}

如果成功全屏，会 resolve 一个 undefined，否则会 reject 一个错误。MDN 文档。

requestFullscreen 有一个可选的参数对象，这个对象也只有一个属性：navigationUI，表示是否在全屏状态下显示导航栏。其有三个值：

• “show”——显示，但我试了没效果。
• “hide”——隐藏
• “auto”——默认值，由浏览器自行决定。

现在，我需要知道什么时候退出的全屏。一开始的想法是监听按键事件，如果是 esc，则代表退出全屏。但是没有生效。因为全屏模式下浏览器屏蔽了 esc 按键的监听。

所以，我只能采用监听 fullscreenchange 事件来判断是否是退出全屏。然而，fullscreenchange 的事件对象并不会告诉开发者当前是进入全屏还是退出全屏。开发者只能通过 document.fullscreenElement 判断。MDN文档。

document.addEventListener('fullscreenchange', handleFullscreenchange)

function handleFullscreenchange(e) {
  if (document.fullscreenElement) {
    console.log('进入全屏')
  } else {
    console.log('退出全屏')
  }
}