【angular-实践】实现浏览器F11全屏效果

.html

<div (click)="fullscreenToggle()">全屏</div>

.component.ts

declare const document: any;

@Component({
  selector: 'uv-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less']
})
export class HeaderComponent implements OnInit {

	isFullscreen = false;
	
	public fullscreenToggle(elem: any = document.documentElement): void{
	    if(!document.fullscreenElement && !document.webkitFullscreenElement) {
	      const docElm = elem;
	      if(docElm.requestFullscreen){
	        docElm.requestFullscreen();
	        this.isFullscreen = true;
	      } else if (docElm.mozRequestFullscreen) {
	        docElm.mozRequestFullscreen();
	        this.isFullscreen = true;
	      } else if (docElm.webkitRequestFullscreen) {
	        docElm.webkitRequestFullscreen();
	        this.isFullscreen = true;
	      } else if (docElm.msRequestFullscreen) {
	        docElm.msRequestFullscreen();
	        this.isFullscreen = true;
	      }
	    } else {
	      if(document.exitFullscreen) {
	        document.exitFullscreen();
	        this.isFullscreen = false;
	      } else if (document.webkitCancelFullscreen) { 
	        this.isFullscreen = false;
	        document.webkitCancelFullscreen();
	      }
	    }
	  }
	}

参考