关于javascript:js-全屏

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();
  }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理