javascript - dom元素全屏展示

业务场景：将 html 界面上的一个 dom 元素全屏展示。

致命问题：

1. 界面内部有弹窗的情况，弹窗会悬浮 dom 元素下方，调整 z-index 一般无效，可以折中看看要不要全屏整个 document；
2. 如果退出全屏需要触发事件，要注意用户可以按 F11 快捷键直接退出；
3. 全屏之后，偶尔会出现少量无法点击的问题，一般出现在插件上，比如：地图。

使用方式

参数传入 dom 对象即可，注意不是 jQuery 对象，Vue 下兼容

/**
 * 面板全屏展示
 */
fullscreen: function () {
	if (this.isFullScreen) {
		// 退出全屏
		this.isFullScreen = false;
		screen.exitFullscreen()
	} else {
		// 全屏展示
		this.isFullScreen = true;
		let dom = this.$refs.tablePanel.$el;
		screen.requestFullscreen(dom);
	}
}

源码

/* eslint-disable */
/**
 * 全屏显示封装
 *
 * @author Mr.css
 * @constructor
 */
function Screen() {
  //是否允许全屏
  let canFull = !!(document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen);

  return {
    /**
     * 是否允许全屏展示
     *
     * @returns {boolean}
     */
    canFullScreen: function () {
      return canFull;
    },
    /**
     * 退出全屏展示
     * @returns {Promise<void>}
     */
    exitFullscreen: async function () {
      if (document.exitFullscreen) {
        await document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else {
        console.info("Current browser not support dom full screen!");
      }
    },
    /**
     *
     * 全屏展示
     * @param dom 需要全屏展示的dom对象
     * @param dom
     * @returns {Promise<void>}
     */
    requestFullscreen: async function (dom) {
      if (dom.requestFullscreen) {
        await dom.requestFullscreen();
      } else if (dom.mozRequestFullScreen) {
        dom.mozRequestFullScreen();
      } else if (dom.webkitRequestFullScreen) {
        dom.webkitRequestFullScreen();
      } else if (dom.msRequestFullscreen) {
        dom.msRequestFullscreen();
      } else {
        console.info("Current browser not support dom full screen!");
      }
    }
  }
}

let screen = new Screen();
export default screen;