.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();
}
}
}
}