After enabling full screen through f11 disable full screen through javascript

Question

By pressing below button i am able to enable and disable fullscreenmode but after f12 is pressed i am not enable to disable fullscreen mode.I refered other answers they have gave only a ways to detect whether window is in full screen mode or not .I am not able to get code for disabling full screen mode from fullscreen(made through f11 key).I tried by triggering f11 through code but it didnt work.Is there any solution for it in all the browsers?

 Html code:
     <button id="fullbutton" width="60px" height="60px" alt="logo" onclick="toggleFullScreen(this)">On</button>

Javascript code :

function toggleFullScreen(element) {
//first part 

if((window.fullScreen) || (window.outerWidth === screen.width && window.outerHeight == screen.height)) {

console.log("full screen is enabled ")

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();


}else {

//second part


if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {


if (document.documentElement.requestFullScreen) {  
  document.documentElement.requestFullScreen();  
} else if (document.documentElement.mozRequestFullScreen) {  
  document.documentElement.mozRequestFullScreen();  //for mozilla
} else if (document.documentElement.webkitRequestFullScreen) {      

 document.documentElement.webkitRequestFullScreen
      (Element.ALLOW_KEYBOARD_INPUT);   //for chrome
     }  else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();
}//for ie

        //   document.getElementById('fullbutton').innerText = 'Off';

   } else {  

    // document.getElementById('fullbutton').innerText = 'On';
    if (document.msFullscreenElement) {
    document.msExitFullscreen();
    } //for ie
   if (document.cancelFullScreen) {  
     document.cancelFullScreen();  
    }   
  else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();   //for mozilla
   } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
   }//for chrome

    }



  console.log("full screen is not enabled ")

   }

   }

Also after enabling through f11 if i give document.webkitIsFullScreen result is giving false .I tried by giving document.documentElement.webkitRequestFullscreen() and then document.webkitCancelFullScreen() that too didnt work.

so, you're only having an issue with webkit browsers (like Chrome)? — Jaromanda X
@JaromandaX nope. Once again, this API's implementation is an hell of a mess.. Gecko did camelCase fullScreen, only them did... — Kaiido
Sorry, MDN documentation is wrong!! (which is a first!) @Kaiido - I should not argue with you :p — Jaromanda X
Oh I've got things wrong quite often, and it's normal to get lost in webkit-ms-o-moz-f[s||S] ApI (specs require fs, but I fear there still needs some time before we've got it unprefixed everywhere...) — Kaiido

Kaiido Kaiido · Accepted Answer · 2018-07-02T02:39:46

F11 fullscreen mode is a browser/OS feature that you don't have access to from javascript, just like you don't have access to how the address bar is displayed.

What you can control is the Fullscreen API, and this is what the document.exitFullscreen, or document.fullscreenElement are based on.

But this fullscreen API is not the same as the F11 one.

Ps: actually, there is the display-mode media-query which should let us know about it.
But it seems that only FireFox did implement it as of now.

const query = matchMedia("all and (display-mode: fullscreen");
query.onchange = e => {
  console.log(query.matches ? 'entered' : 'exited', 'fullscreen mode');
};

<p>From Firefox, try to enter or exit FullScreen mode</p>

After enabling full screen through f11 disable full screen through javascript

1 Answers