JS 如何判断当前页面是否全屏

原创已于 2022-02-09 18:33:30 修改 · 1.2w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#js

于 2020-12-28 13:58:32 首次发布

可视化大屏专栏收录该内容

26 篇文章

订阅专栏

博客介绍了 JS 点击事件，给出了相关代码，并提及可参考 MDN 官网获取更多信息，聚焦于信息技术领域的前端 JS 开发。

点击事件

      <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 官网