angular6 实现全屏，退出全屏，监听esc事件更换相应图标

全屏和退出全屏

• 注意error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.类似相关错误，处理办法

//全屏
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
        mozRequestFullScreen(): Promise;
        webkitRequestFullscreen(): Promise;
        msRequestFullscreen(): Promise;
      };
//退出全屏
const docWithBrowsersExitFunctions = document as Document & {
        mozCancelFullScreen(): Promise;
        webkitExitFullscreen(): Promise;
        msExitFullscreen(): Promise;
      };

• 注意兼容性
• 实现功能代码如下：

 fullScreen() {
    if (!this.is_full_screen) {
      const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
        mozRequestFullScreen(): Promise;
        webkitRequestFullscreen(): Promise;
        msRequestFullscreen(): Promise;
      };

      if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
        docElmWithBrowsersFullScreenFunctions.requestFullscreen();
      } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
        docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
      } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
      } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
        docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
      }
      this.is_full_screen = true;
    } else {
      const docWithBrowsersExitFunctions = document as Document & {
        mozCancelFullScreen(): Promise;
        webkitExitFullscreen(): Promise;
        msExitFullscreen(): Promise;
      };
      if (docWithBrowsersExitFunctions.exitFullscreen) {
        docWithBrowsersExitFunctions.exitFullscreen();
      } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
        docWithBrowsersExitFunctions.mozCancelFullScreen();
      } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        docWithBrowsersExitFunctions.webkitExitFullscreen();
      } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
        docWithBrowsersExitFunctions.msExitFullscreen();
      }
      this.is_full_screen = false;
    }
  }

监听esc事件更换图标

• 键盘事件在这种情况下会失效，解决办法，监听屏幕大小改变事件

window.addEventListener("resize", () => {
      this.checkFull();
    });
    
checkFull() {
    let full_status = document['fullscreen'] || document['webkitIsFullScreen'] || document['mozFullScreen'] || false;
    if (!full_status) {
      this.is_full_screen = false;
    } else {
      this.is_full_screen = true;
    }
  }

参考博客

• 如何使用HTML5 Fullscreen API
• Fullscreen API 全屏显示网页
• 全屏显示API兼容浏览器封装