js页面全屏功能

165 阅读1分钟

写在前面: 此次功能实现是基于vue项目,百度了一圈发现vue是有插件-screenfull,但想了想实现的原理应该脱离不了js,最后还是决定使用文档流和js来实现全屏。 代码如下

 fullScreen () { // 全屏
      var 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()
      }
      this.isFull = true
    },
    exitScreen () { // 退出全屏
      if (document.exitFullScreen) {
        document.exitFullscreen()
      }
      // 兼容火狐
      console.log(document.mozExitFullScreen)
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      }
      // 兼容谷歌等
      if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
      // 兼容IE
      if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      this.isFull = false
    },