JS 如何判断当前页面是否全屏_js 监测浏览器窗口是否为全屏状态-CSDN博客

本文链接：https://blog.csdn.net/IT_iosers/article/details/111842165

点击事件

      <span class="iconfont icon-quanping1" @click="fullscreenchange"></span>

js 代码

    fullscreenchange() {
    // fullScreen 被弃用
    // const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
    
    // 最新写法
	  const isFullScreen = document.fullscreenElement
      
      if (isFullScreen) {
        console.log('退出全屏')
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        var fullscreen = this.$refs.fullscreen   // 需要全屏的元素
        console.log('进入全屏')
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen()
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen()
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen()
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen()
        }
      }
    }

参考官网MDN 官网