关于javascript:js-全屏

9次阅读

共计 1456 个字符,预计需要花费 4 分钟才能阅读完成。

1、援用文章:https://www.bbsmax.com/A/xl56…
2、全屏时可依据是否传入 dom 元素,判断是整个页面全屏,还是某个 dom 全屏,例如:

this.handleFullScreen('#overviewMapContainer');

3、呈现的问题:在应用 element、iview、ant design 等 ui 组件时,Select、Dropdown 组件默认是挂载到 body 节点,所以如果是具体某个 dom 元素的全屏,可能会生效,但只有挂载到相应 dom 元素下应该就能够实现 (未测试)

// 全屏
handleFullScreen(dom) {
  let mapMainContent;
  // 判断是否有 dom 传入,没有则是整个页面全屏展现
  dom ? mapMainContent = document.querySelector(dom) : mapMainContent = document.documentElement;
  if (this.isFUllScreenEnabled()) {if (this.hasFullScreenElement()) {this.exitFullScreen();
    } else {this.setFullScreen(mapMainContent);
    }
  } else {console.log('此浏览器不反对全屏');
  }
},
// 判断浏览器是否反对全屏
isFUllScreenEnabled() {return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;},
// 判断是否有已全屏的元素
hasFullScreenElement() {return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;},
// 将指标元素设置为全屏展现
setFullScreen(target) {if (target.requestFullscreen) {target.requestFullscreen();
  }
  if (target.webkitRequestFullscreen) {target.webkitRequestFullscreen();
  }
  if (target.mozRequestFullScreen) {target.mozRequestFullScreen();
  }
  if (target.msRequestFullscreen) {target.msRequestFullscreen();
  }
},
// 文档退出全屏
exitFullScreen() {if (document.exitFullscreen) {document.exitFullscreen();
  }
  if (document.webkitExitFullscreen) {document.webkitExitFullscreen();
  }
  if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
  }
  if (document.msExitFullscreen) {document.msExitFullscreen();
  }
}
正文完
 0