Exit full screen on Angular when starting with full screen

Question

When starting chrome with full screen, exiting full screen on angular does not work.

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

This is stackblitz sample.

When opening the page above (and "open in new window"), the "Go full screen" and "Exit full screen" buttons work.

But when opening this page with full screen option as below, the "Exit full screen" button does not work.

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

Why "Exit full screen" does not work when starting with full screen mode? How can I fix this?

Clemens Sum Clemens Sum · Accepted Answer · 2020-10-26T12:06:42

It seems that there is a difference between a user-agent initiated "Go fullscreen" action (e.g. starting with --start-fullscreen flag or entering fullscreen using F11 and the Fullscreen-API initiated `requestFullscreen" call.

When opening the DevTools and adding a Live-expression to watch document.fullscreenElement, you can see, that this is not set when using F11 or --start-fullscreen but it is set, when using the Fullscreen-API. document.exitFullscreen() will only work when document.fullscreenElement is set.

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

A possible solution could be to depend on a URL-parameter and toggle to fullscreen inside your component-logic in case it is set?

See https://stackblitz.com/edit/angular-go-full-screen-f11-key-xiq6va?file=src%2Fapp%2Fapp.component.ts for a demo that launches fullscreen.

Exit full screen on Angular when starting with full screen

1 Answers