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

你可能感兴趣的:(javascript)