从全屏开始时在 Angular 上退出全屏

Question

当以全屏方式启动 chrome 时，在 Angular 上退出全屏不起作用。

html:

<hello name="{{ name }}"></hello>
<a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style="display: block;">
  Open in new window
</a>
<button (click)="openFullscreen()">Go full screen</button>
<button (click)="closeFullscreen()">Exit full screen</button>

ts：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
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 (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();
    }
  }
}

这是stackblitz sample.

打开上面的页面（和“在新窗口中打开”）时，“进入全屏”和“退出全屏”按钮起作用。

但是当使用如下全屏选项打开此页面时，“退出全屏”按钮不起作用。

chrome.exe --start-fullscreen https://angular-go-full-screen-f11-key.stackblitz.io

为什么以全屏模式启动时“退出全屏”不起作用？我该如何解决这个问题？

Answer 1

用户代理发起的“全屏”操作（例如，从 --start-fullscreen 标志开始或使用 F11 进入全屏）与 Fullscreen-API 发起的“requestFullscreen”调用之间似乎存在差异。

打开 DevTools 并添加 Live-expression 以观看 document.fullscreenElement 时，您可以看到，使用 F11 或 --start-fullscreen 时未设置，但使用 Fullscreen-API 时已设置。 document.exitFullscreen() 仅在设置 document.fullscreenElement 时有效。

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

一个可能的解决方案可能是依赖一个 URL 参数并在组件逻辑中切换到全屏以防它被设置？

请参阅https://stackblitz.com/edit/angular-go-full-screen-f11-key-xiq6va?file=src%2Fapp%2Fapp.component.ts 了解启动全屏的演示。