Detect Fullscreenmode

[patlux]

Hi,

what if I press F11 on my keyboard or activate the fullscreen mode over my browser manually, is there a function/event to detect this? Can you implement a functionality to this?

See: http://stackoverflow.com/questions/16755129/detect-fullscreen-mode

patlux

[hrajchert]

Well, I've tried it myself with no luck. I'm only wrapping the screenfull library, and they are only putting a thin layer on top of the HTML5 fullscreen API.

I've searched on the screenfull issue list, and it was listed as a bug that couldn't be fixed

sindresorhus/screenfull#82

It seemed strange that it couldn't be fixed, so I searched in the mozilla specs and other sites and found this:
http://stackoverflow.com/questions/21103478/fullscreenchange-event-not-firing-in-chrome

What it basically says is that they don't fire the event for security reasons :S...

Not much we can do about it.

[blitzmann]

We had a need to determine if the page was fullscreen or not by using both. At first, I tried $document.keyup(), which captures the keypress of F11 into fullscreen, but does not capture the keypress when exiting.

The solution that we came up with was to watch the window height:

    var w = angular.element($window);

    w.bind('resize', function () {
        $scope.$apply();
    });

    $scope.$watch(() => $window.innerHeight, function (value) {
          if (value == screen.height) {
              $scope.isFullScreen = true;
          } else {
              $scope.isFullScreen = false;
          }
      }, true);

Everytime the window resizes, we check to see if the height matches the screen height. If it does, we assume it's fullscreen. We don't check width, as I have the console docked to the side and that screws with the window size (console docked to the bottom will cause this to not work). It's definitely hacky and not a proper solution, but for every day users that aren't working in the console, this seems to work well.

[hrajchert]

Nice hack ;)... you can even make a directive or service out of that.

[bernardoadc]

What about just preventing the F11 effect, is it possible? This will force user to enable fullscreen some other way

[KimChonHo]

onresize = (event) => {
if (!window.screenTop && !window.screenY) console.log("full");
else console.log("win");
};