全屏功能实现

1. 全屏API 控制浏览器使得一个元素与其子元素，占据整个屏幕，并在此区间隐藏浏览器的用户界面及其他应用；

/**
* Document中的方法：（关闭全屏模式）
* Document.exitFullscreen() 用于请求从全屏切换到窗口模式，会返回一个Promise，会在全屏模式完全关闭时被置为resolved状态；
* Element方法：（开启全屏模式）
* element.requestFullscreen() 请求浏览器将特定元素（甚至延伸至其后代元素）置为全屏模式，隐去屏幕上的浏览器所有的UI元素，以及其他应用。返回一个Promise， 并会在全屏模式被激活的时候变为resolved状态。
* *document提供了判断是否支持和启用全屏模式的属性，也能得知现在是否处于全屏模式，哪一个元素在使用屏幕等信息。
* DocumentOrgShadowRoot.fullscreenElement :
* 提供了当前在DOM（或者shadow DOM) 里被展示为全屏模式的Element，如果这个值为null，说明该文档不处于全屏模式。
* Document.fullscreenEnabled:
* 提供启用全屏模式的可能性，当她的值为false时，表示全屏模式不可用（可能的原因是’fullscreen‘特性不被允许，或者全屏模式不被支持等）；*
*  element上的事件处理程序
* 	element.onfullscreenchange
* 	element.onfullscreenerror
*/ 
// 监听 Enter 键
document.addEventListener(
  "keydown",
  function (e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  },
  false,
);
// 切换至全局模式，上用户按下“enter”“键时，调用
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}