如何让Google Chrome在Angular 4应用程序中全屏显示？

Question

我正在开发一个应用程序,我希望实现这样的事情:如果用户从一个组件离开并进入其他组件,那么在其他组件的ngOnInit方法中,chrome浏览器应该全屏显示与按Fn + F11键时相同的全屏.

任何帮助或参考表示赞赏.

Answer 1

如何 - 全屏 - https://www.w3schools.com/howto/howto_js_fullscreen.asp

这是当前"有角度的方式"来做到这一点.

HTML

<h2 (click)="openFullscreen()">open</h2>
<h2 (click)="closeFullscreen()">close</h2>

零件

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: any) {}
  elem;

  ngOnInit() {
    this.elem = document.documentElement;
  }

  openFullscreen() {
    if (this.elem.requestFullscreen) {
      this.elem.requestFullscreen();
    } else if (this.elem.mozRequestFullScreen) {
      /* Firefox */
      this.elem.mozRequestFullScreen();
    } else if (this.elem.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.msRequestFullscreen) {
      /* IE/Edge */
      this.elem.msRequestFullscreen();
    }
  }

  /* Close fullscreen */
  closeFullscreen() {
    if (this.document.exitFullscreen) {
      this.document.exitFullscreen();
    } else if (this.document.mozCancelFullScreen) {
      /* Firefox */
      this.document.mozCancelFullScreen();
    } else if (this.document.webkitExitFullscreen) {
      /* Chrome, Safari and Opera */
      this.document.webkitExitFullscreen();
    } else if (this.document.msExitFullscreen) {
      /* IE/Edge */
      this.document.msExitFullscreen();
    }
  }
}

Answer 2

您可以尝试 requestFullscreen

我已经在Stackblitz上创建了一个演示

fullScreen() {
    let elem = document.documentElement;
    let methodToBeInvoked = elem.requestFullscreen ||
      elem.webkitRequestFullScreen || elem['mozRequestFullscreen']
      ||
      elem['msRequestFullscreen'];
    if (methodToBeInvoked) methodToBeInvoked.call(elem);
}

Answer 3

上面的大部分答案都是2018年的，现在要实现Chrome、Firefox、其他浏览器和移动设备的兼容性，我确定使用requestFullScreen就足够了

https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

以下是能够在全屏和正常屏幕之间切换的示例：

docElement: HTMLElement;
isFullScreen: boolean = false;

ngOnInit(): void {
    this.docElement = document.documentElement;
}

toggleFullScreen() {
    if (!this.isFullScreen) {
      this.docElement.requestFullscreen();
    }
    else {
      document.exitFullscreen();
    }
    this.isFullScreen = !this.isFullScreen;
}

仅当用户与元素（例如按钮）交互时才能发出更改为全屏的请求

<button (click)="toggleFullScreen()">SWITCH SCREEN MODE</button>