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.
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 Commented Jul 2, 2018 at 2:38
- ya @JaromandaX. Also i want solutions in mozilla and ie – Ajith Commented Jul 2, 2018 at 2:39
- @JaromandaX nope. Once again, this API's implementation is an hell of a mess.. Gecko did camelCase fullScreen, only them did... – Kaiido Commented Jul 2, 2018 at 2:42
- Sorry, MDN documentation is wrong!! (which is a first!) @Kaiido - I should not argue with you :p – Jaromanda X Commented Jul 2, 2018 at 2:42
- 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 Commented Jul 2, 2018 at 2:48
1 Answer
Reset to default 6F11 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>