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

Question

我正在开发一个应用程序，在这个应用程序中，当用户离开一个组件并进入另一个组件时，希望在其他组件的ngOnInit方法中实现这样一项功能：Chrome浏览器应该全屏显示，就像我们按下Fn + F11键一样。

非常感谢您提供任何帮助或参考资料。

- Jignesh Mistry

---

可能是重复的问题：如何在JavaScript中以编程方式进入和退出全屏模式？ - Adrian Fâciu

可能是 https://dev59.com/aGAg5IYBdhLWcg3wLITS 的重复问题。 - IgnoranceIsBliss

Answer 1

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

以下是当前的 "Angular 方式"。

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

- Stavm

---

“current way” 是 2018 年的方式 - 现在已经是 2022 年了：https://dev59.com/blQK5IYBdhLWcg3wV-pZ#71572615 - Mauricio Gracia Gutierrez

Answer 2

你可以尝试使用requestFullscreen。我已经在StackBlitz上创建了一个演示。

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

- Krishna Rathore

---

尝试使用Brother时，它给我返回了这个错误 -> 在类型为'HTMLElement'的属性'mozRequestFullScreen'不存在。 - Jignesh Mistry

当我从一个组件转到另一个组件时，我希望它能自动触发。 - Jignesh Mistry

兄弟，这个程序运行得很好，但用户需要自动执行，所以我直接从ngOnInit中调用了你的函数，现在它显示了这个错误 -> 在“元素”上执行“requestFullscreen”失败：API只能由用户手势启动。 - Jignesh Mistry

你不能强制一个网站在全屏模式下显示。如果这是可能的，想象一下安全问题。恶意网站可以“劫持”不太懂计算机的人的桌面进行各种可疑的业务。所有JS全屏API都会抛出像这样的错误：“在'Element'上执行'requestFullScreen'失败：API只能由用户手势启动。”如果你试图从你的代码中简单地调用它。 - Krishna Rathore

@KrishnaRathore 我尝试将脚本放在ngOnInit中，但它没有起作用。你能帮我吗？提前感谢... - SK.

如何退出全屏模式？使用 document.exitFullscreen。 - Ashwin

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>

- Mauricio Gracia Gutierrez

---

这种方法会在你不使用按钮而是使用 F11 等方式进入或退出全屏模式时出现问题。 - Edu Müller

对于你来说，其他的答案更好还是我的答案缺少什么？ - Mauricio Gracia Gutierrez

使用 document 的 fullscreenElement 属性（https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement）。 - Edu Müller

我的代码并不旨在检测当前屏幕是否处于全屏模式，这实际上超出了问题的范围，但是需要记住这一点。 - Mauricio Gracia Gutierrez

Answer 4

将以下代码放在您想要触发的组件（@Component之前）的顶部：

    interface FsDocument extends HTMLDocument {
      mozFullScreenElement?: Element;
      msFullscreenElement?: Element;
      msExitFullscreen?: () => void;
      mozCancelFullScreen?: () => void;
    }

    export function isFullScreen(): boolean {
      const fsDoc = <FsDocument> document;

      return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
    }

    interface FsDocumentElement extends HTMLElement {
      msRequestFullscreen?: () => void;
      mozRequestFullScreen?: () => void;
    }

    export function toggleFullScreen(): void {
      const fsDoc = <FsDocument> document;

      if (!isFullScreen()) {
        const fsDocElem = <FsDocumentElement> document.documentElement;

        if (fsDocElem.requestFullscreen)
          fsDocElem.requestFullscreen();
        else if (fsDocElem.msRequestFullscreen)
          fsDocElem.msRequestFullscreen();
        else if (fsDocElem.mozRequestFullScreen)
          fsDocElem.mozRequestFullScreen();
        else if (fsDocElem.webkitRequestFullscreen)
          fsDocElem.webkitRequestFullscreen();
      }
      else if (fsDoc.exitFullscreen)
        fsDoc.exitFullscreen();
      else if (fsDoc.msExitFullscreen)
        fsDoc.msExitFullscreen();
      else if (fsDoc.mozCancelFullScreen)
        fsDoc.mozCancelFullScreen();
      else if (fsDoc.webkitExitFullscreen)
        fsDoc.webkitExitFullscreen();
    }

    export function setFullScreen(full: boolean): void {
      if (full !== isFullScreen())
        toggleFullScreen();
    }

在ngOnInit方法中调用setFullScreen(full: boolean)函数：

ngOnInit(): void {
    setFullScreen(true);
}

- Ayoub k

---

抛出错误-> core.js:1598 错误：未捕获的（在承诺中）：错误：意外值'DashboardDefaultComponent'由模块'DashboardDefaultModule'声明。请添加@Pipe/@Directive/@Component注释。 - Jignesh Mistry

我之前在使用这个功能，但在 Angular 7.0.0 中它已经无法工作了，现在会抛出一个错误。 - Swoox

Answer 5

这是目前使用 Angular 的方法。

HTML： 在 HTML 中使用此代码：

(click)="openFullscreen()

NgOninit：

this.elem = document.documentElement;

TS：放入这个函数它就会工作…

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

}

- Abdull Rehman Memon

Answer 6

您需要使用几乎所有浏览器都提供的全屏API。您可以在这里阅读有关它的信息。

简而言之，要在全屏模式下显示一个元素，您需要在其上调用requestFullscreen()。通过exitFullscreen()退出全屏模式。要检查浏览器是否处于全屏模式，可以访问fullscreenElement文档属性。您还可以处理fullscreenchange事件，以便在切换全屏模式时得到通知。

由于此API与基于Webkit的浏览器存在兼容性问题，因此建议您使用webkit前缀。

如果您想以“Angular方式”实现全屏功能，建议创建一个指令。如果您愿意，可以使用第三方库，例如ngx-fullscreen-directive。

- Rabbit