浏览器全屏功能

最新推荐文章于 2023-05-10 19:50:55 发布

_i_look_

最新推荐文章于 2023-05-10 19:50:55 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/qq_21821091/article/details/103322266

版权

最近公司的实验页面做功能升级，于是做了一些。
基础版本(版本一）

  var el = document.documentElement;
  var rfs = el.requestFullScreen || el.webkitRequestFullScreen || 
      el.mozRequestFullScreen || el.msRequestFullscreen;
  if(typeof rfs != "undefined" && rfs) {
    rfs.call(el);
  } 
}
function exitFullScreen() {
  var el = document;
  var cfs = el.cancelFullScreen || el.webkitExitFullscreen || 
      el.mozCancelFullScreen || el.exitFullscreen || el.msExitFullscreen();
  if(typeof cfs != "undefined" && cfs) {
    cfs.call(el);
  } 
}

高级版本（版本二）

 judgeScreen() {
      const fullScreenChange = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
      let validScreen
      fullScreenChange.map((value) => {
        if (`on${value}` in document) {
          validScreen = value
        }
        return true
      })
      document.addEventListener(validScreen, () => {
        const fullscreenElement = document.fullscreenElement ||
        document.mozFullScreenElement || document.webkitFullscreenElement
        this.maxShow = Boolean(fullscreenElement)
      })
    },
    changeScreen() {
      if (this.maxShow) {
        this.minScreen()
      } else {
        this.maxScreen()
      }
    },
    maxScreen() {
      const el = document.documentElement
      const rfs = el.requestFullscreen || el.webkitRequestFullScreen ||
      el.mozRequestFullScreen || el.msRequestFullscreen
      if (typeof rfs !== 'undefined' && rfs) {
        rfs.call(el)
        this.maxShow = true
      }
    },
    minScreen() {
      const el = document
      const cfs = el.cancelFullScreen || el.webkitExitFullscreen ||
      el.mozCancelFullScreen || el.exitFullscreen || el.msExitFullscreen
      if (typeof cfs !== 'undefined' && cfs) {
        cfs.call(el)
        this.maxShow = false
      }
    },