After enabling full screen through f11 disable full screen through javascript

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.

document.webkitIsFullScreen

document.documentElement.webkitRequestFullscreen()

document.webkitCancelFullScreen()

1 Answer
1

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.

document.exitFullscreen

document.fullscreenElement

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.

display-mode

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>

window.screen

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.