Open a url in full screen mode

Question

I am trying to open a URl in full screen on click of a button, am using the following code. The window does open full screen but then on the URL reload just goes back to the orignal screen size,

<script type="text/javascript">

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();  
        }    
    }  
    window.location.href = "http://google.com/";    
}



</script>

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

I have even tried open page from the same domain, even that doesn't seem to work.

Answer 1

First, I recommend using "screenfull" to avoid the boilerplate JavaScript you have: https://github.com/sindresorhus/screenfull.js/

It will expose itself on the window object so it is as easy as this:

if (screenfull.enabled) {
    screenfull.request();
}

Second, As far as I know, you can't fix this. The browser requests permission from the user to open specifically that page in full screen and as you've said, that does work.

When you use window.location you "navigate away" from that page and the full screen permission attached to it.