Full screen functionality is not working properly

Question

I am trying to implement full screen functionality in my website, but it is not working properly, what happens is that when I switch to other pages through menu, it looses the full screen functionality. For example, I have a button to toggle full screen functionality, so when I clicked, it goes full screen, but when I click to other pages link, it goes to another pages but not in the full screen. However if I use keyboard button like F11, it is working properly.

So what I am using is a button for user, so that he can toggle full screen which is

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen()">

And my function is as follows:

  function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    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();  
    }  
  }  
}

But this is not working for all pages. Is there any way when a user click the button 'F11', button is activated as it works properly and on toggle it will exit fullscreen.

Answer 1

The Fullscreen web API's request is made on an Element in the active Document.
When you navigate to an other page, the Document where this request has been made is dead, so it is normal that the Fullscreen mode be deactivated.

The F11 Fullscreen mode is not the Fullscreen web API, but part of the browser UI, just like dev-tools etc. This mode is thus allowed to be persistent across Documents.

The only way to workaround that would be to navigate to the other page from the original Document, e.g using an <iframe>.