js实现全屏和退出全屏

最新推荐文章于 2024-02-29 15:29:40 发布

lanbozhiguang

最新推荐文章于 2024-02-29 15:29:40 发布

阅读量315

点赞数 1

分类专栏：前台

本文链接：https://blog.csdn.net/lanbozhiguang/article/details/102395684

版权

前台专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.按F11实现的全屏，用api不能退出；用api实现的全屏，可以用api退出全屏；
所以这里监听F11事件并阻止事件， 同时执行自己写的全屏函数
window.addEventListener('keydown',e => {
  e = e || window.event
  if (e.keyCode===122) {
    e.preventDefault()
    this.launchFullscreen()
  }
})

2.全屏按钮则直接执行这个全屏函数

launchFullscreen() {
    let isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    if(!isFullscreen){
      if (window.ActiveXObject) {
        var WsShell = new ActiveXObject('WScript.Shell')
        WsShell.SendKeys('{F11}');
      }else{
        let el = document.documentElement
        let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
        if (rfs) { // typeof rfs != "undefined" && rfs
          rfs.call(el)
        }
      }
    }else{
      document.exitFullscreen ? document.exitFullscreen() :
      document.mozCancelFullScreen ? document.mozCancelFullScreen() :
      document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
    }
  },