美文网首页
screenfull.js全屏状态监听

screenfull.js全屏状态监听

作者: Bior | 来源:发表于2022-07-12 11:42 被阅读0次

    screenfull.js监控全屏状态,但是试了一下,isFullscreen的状态在全屏之后是true,ESC退出全屏之后状态没有改变,于是上网搜了一下,大多是让window.onresize 监听全屏状态:

         window.onresize = () => {
                // 全屏下监控是否按键了ESC
                if (!this.checkFull()) {
                  // 全屏下按键esc后要执行的动作
                  this.isFullscreen = false;
                }
              }
           }
    
        checkFull() {
          var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
          // to fix : false || undefined == undefined
          if (isFull === undefined) {
              isFull = false;
          }
          return isFull;
        }
     
          
    

    实际上screenfull有个onchange事件,在这里维护全屏状态就行了:

     mounted () {
        screenfull && screenfull.isEnabled && screenfull.onchange(() => {
          this.isFullscreen = !this.isFullscreen;
        })
      },
    

    特此记录

    相关文章

      网友评论

          本文标题:screenfull.js全屏状态监听

          本文链接:https://www.haomeiwen.com/subject/ccxabrtx.html