In my web application I have a button to allow the users to work on full-screen mode. My problem is that it's only working for the current page, if we click a link or in any other way change pages or even if we refresh the current one the full-screen mode is lost.

this is the function I'm using to allow the full-screen:

// Handle full screen mode toggle
var handleFullScreenMode = function () {
  // toggle full screen
  function toggleFullScreen() {
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
  }

  $('#trigger_fullscreen').click(function () {
    toggleFullScreen();
  });
}

$(document).ready(function () {
  handleFullScreenMode();
});

Is there anyway to keep the it when changing pages like what happens when you click F11?

In my web application I have a button to allow the users to work on full-screen mode. My problem is that it's only working for the current page, if we click a link or in any other way change pages or even if we refresh the current one the full-screen mode is lost.

this is the function I'm using to allow the full-screen:

// Handle full screen mode toggle
var handleFullScreenMode = function () {
  // toggle full screen
  function toggleFullScreen() {
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
  }

  $('#trigger_fullscreen').click(function () {
    toggleFullScreen();
  });
}

$(document).ready(function () {
  handleFullScreenMode();
});

Is there anyway to keep the it when changing pages like what happens when you click F11?

• javascript
• fullscreen

• So the page itself refreshes? Its not doing js and staying in the view? – Jamie Hutber Commented Jan 29, 2015 at 15:36
• You can keep the state of full-screen mode through page reloads by storing it's value in cookies or localStorage/sessionStorage and reapplying your full-screen function depending on that. – hindmost Commented Jan 29, 2015 at 15:57
• @hindmost that would work to a certain level, but I prefer to remove the full-screen functionality than to have the window changing sizes all the time. It gets a bit frustrating and frustration is not something i want the users to feel when using my application. – FabioG Commented Jan 29, 2015 at 16:07

1 Answer 1

Unfortunately not.

The API specifies that fullscreen will only operate on the current, or descending browser contexts.

When the page is changed or refreshed, the browser context changes, and the fullscreen effect is lost.

MDN also reinforces with:

... navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.