Fullscreen API not working if triggered with F11

Question

I implemented a fullscreen toggling feature for my application and it is actually working fine, tested on newest Chrome, Firefox, IE and Opera. I have one method for activating and one for deactivating fullscreen mode:

  public deactivateFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      document.webkitCancelFullScreen();
    } else if (element.mozRequestFullScreen) {
      document.mozCancelFullScreen();
    }else if(element.msRequestFullscreen){
      document.msExitFullscreen();
    }
  }

  public activateFullscreen(element) {
    if (element.requestFullScreen) {
      element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    }else if(element.msRequestFullscreen){
      element.msRequestFullscreen();
    }
  }

So when triggered from UI they both work fine. The only problem is once I enter fullscreen mode using F11 I cannot exit it using the deactivateFullscreen function. As far as I understand it for the browser no flag is set once I hit F11. I tried to test it using the following method:

  public isFullscreen(element) {
    if(element.webkitIsFullScreen || element.mozFullscreen || element.msFullscreenElement || element.fullscreenElement || element.fullscreen || element.webkitFullscreenElement || element.mozFullScreenElement){
      return true;
    }
    return false;
  }

This always returns false, no matter whether I am in fullscreen or not. Is there any other way to detect if I the browser is currently in fullscreen mode? Or am I missing on some concept here?

Another thing I tried is to catch the keydown event for F11 and prevent its default action.

$document.on('keydown',this.fsHandle);

  public fsHandle(event:KeyboardEvent){
    if(event.keyCode == 122){
      event.preventDefault();
      this._isFullscreen = !this._isFullscreen;
    }
  }

Using this method I expected to supress any F11 events in order to process the fullscreen toggling manually via code. Unfortunately this also does not work. The reason seems a little odd, the keydown-event is simply not triggered while I am already in fullscreen. Hence I can supress the event outside the fullscreen mode but not once I entered it.

Update: Some research showed that security concerns of browser vendors are the reason for this behaviour. Still there has to be a way to handle this kind of features.

Answer 1

It seems impossible as of now.

See this question that was asking exact same thing. But it's an evolving situation that deserves being revisited from time to time, so here are some details I gathered.

One comment there said:

This fullscreen window mode is OS dependent, only at an app level, and not tied to any API available to us poor web-devs. [...] You won't find any cross-browser/cross-OS hack (I don't even know any for my own browser/OS). The only way you could get something would be through [a] more powerful API, giving you an application access to the browser's window.

The API that allows to programmatically control fullscreen state is defined in fullscreen spec, and I was hoping it would shed light on the issue. Browsers do not fully implement it yet (e.g. document.exitFullscreen() is not implemented in Chrome and document.webkitExitFullscreen() does not return a Promise), but it gives hints about where things are going. Unfortunately it does not mention the pre-existing full-screen browser feature (the one triggered by F11), so it's difficult to say how this would evolve.

For now, F11-fullscreen and programmatic-fullscreen are 2 different things, although not entirely isolated from one another. Also, on macOS for example, browser's "full screen" feature is completely different, as it does take the whole screen but can still leave address bar and/or tabs shown.

If you check this demo page for a library that wraps browser-specific implementations, you can see that:

• When programmatically setting body or any element fullscreen, the browser applies special CSS rules (e.g. background becomes black).
• This does not happen with F11-fullscreen
• This also does not happen with programmatic fullscreen on document (document.documentElement), so that's the closest you can get from F11-fullscreen.

But that does not make F11-FS and programmatic-FS-on-doc-element equivalent:

• animated transitions are different (and actually a bit clunky for example on Firefox and programmatic-fullscreen on document element, as it fades to black in anticipation of black background, but there is no black background when fullscreened element is document, as stated above)
• When F11-fullscreened, document.documentElement === (document.msFullscreenElement || document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) is false, but true when programmatic-fullscreen-on-document-element (verified on Chrome & Firefox & IE11)
• F11 key can exit programmatic-fullscreen, but programmatic-exitFullscreen cannot exit F11-fullscreen. Which is the problem you are running into. Also, Esc key cannot exit F11-fullscreen, but does exit programmatic-fullscreen.

So, what should we do then?

Since there are 2 different features, maybe it's OK to leave them be: if users enter F11-fullscreen, they will know how to exit by just pressing the same key again. If they enter programmatic-fullscreen with your UI controls, make sure you make it as obvious how to exit. It might be (understandably) frustrating as a dev not to be able to control both 100%, but in practice users will probably be fine, as they will use one or the other.

Answer 2

Use shortcut.js for manipulation the pressed key. It's good.

Exemple code :

shortcut.add("F11",function() {
    alert("F11 PRESS");
});

Or

JSFiddle Exemple