angular全屏功能

y∩__∩y 归来

已于 2022-03-04 16:13:28 修改

阅读量909

点赞数

分类专栏： Angular

于 2022-03-04 16:12:44 首次发布

本文链接：https://blog.csdn.net/qq_43730595/article/details/123278378

版权

angular.js css javascript

Angular 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Angular 进入页面全屏实现

html代码：
ts代码：

html代码：

<div  style=" width: 100%;height: 100%;background: #000000;" id="full-screen-five">
    <h1 (click)="textClick()">点击全屏/退出全屏</h1>
</div>

ts代码：

  textClick() {
    /*判断是否全屏*/
    var ell = document.getElementById('full-screen-five');
    const el = ell as HTMLElement & {
      mozRequestFullScreen(): Promise<void>;
      webkitRequestFullscreen(): Promise<void>;
      msRequestFullscreen(): Promise<void>;
    };
    let isFullscreen =
      document['fullscreenElement'] || //W3C
      document['msFullscreenElement'] || //IE
      document['mozFullScreenElement'] || //火狐
      document['webkitFullscreenElement'] || //谷歌
      false;

    if (!isFullscreen) {
      if (el.requestFullscreen) {
        el.requestFullscreen();
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
      } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen();
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document['msExitFullscreen']) {
        document['msExitFullscreen']();
      } else if (document['mozCancelFullScreen']) {
        document['mozCancelFullScreen']();
      } else if (document['webkitCancelFullScreen']) {
        document['webkitCancelFullScreen']();
      }
    }
  }