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

最新推荐文章于 2024-02-01 16:05:43 发布

玉米_欣

最新推荐文章于 2024-02-01 16:05:43 发布

阅读量2.2k

点赞数 2

分类专栏：前端 angular4 文章标签： fullscreen angular 全屏

本文链接：https://blog.youkuaiyun.com/u012967849/article/details/90815012

版权

前端同时被 2 个专栏收录

49 篇文章

订阅专栏

angular4

6 篇文章

订阅专栏

全屏和退出全屏

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

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

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

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

      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<void>;
        webkitExitFullscreen(): Promise<void>;
        msExitFullscreen(): Promise<void>;
      };
      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;
    }
  }