JS to achieve full screen effect

Click the button to trigger requestFullscreen() to open the full screen

requestFullscreen () {
  const docElm = document.documentElement
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen()
  } else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen()
  } else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen()
  } else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen()
  }
}
Copy the code

Clicking the button triggers the exitFullScreen() function to turn off full screen

exitFullScreen () {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  }
}
Copy the code

If you want to listen for a full-screen state change, you can listen for the FullScreenChange event

document.addEventListener('fullscreenchange', () => {
  console.log('fullscreenchange')
})
Copy the code

Vue project implementation address

Github.com/gywgithub/v…

Github.com/gywgithub/v…

Refer to the link

Developer.mozilla.org/en-US/docs/…

Developer.mozilla.org/en-US/docs/…