Fullscreen API and external links

Question

I'm trying to open a new page (with a different layout) using the fullscreen API. When an user clicks on the open course link, the proper page/layout will open in fullscreen mode.

I'm using this function to fire full screen mode:

// Find the right method, call on correct element
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// Launch fullscreen for browsers that support it!
launchIntoFullscreen(document.documentElement); // the whole page

The problem is, the API only accepts opening the same page or a hidden element in fullscreen mode. I'm aware this is the expected behaviour.

I need to open a different page in fullscreen mode when the user clicks on the proper link.

Is there any workaround to make it possible?

Answer 1

This is what I currently use to toggle full screen mode.

function fullscreen() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);
    if (!isInFullScreen) {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

You can not launch a new page in full screen as it is restricted (as you noticed) by browser security. You can, however open a .NET or Java application full screen.

One suggestion to try and bypass the browser security, would be to offer up a plugin that will work with your page extending it's capabilities to the users desktop.

You may also try more low level event hooking or attempt to simulate them (eg, fake a 'Click' hardware event). This could be assisted with another language if required like Flash, Java or .NET.

Hopefully this is enough information to get the gears rolling and work-around the issue. I am sure you can understand why this is part of browser security, but the possibility to bypass using extensibility is also there, so kind of a m00t factor imho. If they really wish to keep browsers safe, then they would not have an option to auto-download, or auto-run stuff, and javascript wouldn't have the ability to spam with UI blocking dialog boxes or play audio -- and so on. But I digress. Lack of use of this functionality under the guise of 'browser security' is a very weak argument given there are plenty more troublesome issues out there.