After enabling full screen through f11 disable full screen through javascript
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()
ya @JaromandaX. Also i want solutions in mozilla and ie
– Ajith
Jul 2 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
Jul 2 at 2:42
Sorry, MDN documentation is wrong!! (which is a first!) @Kaiido - I should not argue with you :p
– Jaromanda X
Jul 2 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
Jul 2 at 2:48
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>
So your answer is it is not possible to make this functionality ?
– Ajith
Jul 2 at 2:42
@Ajith that's about it. But if it is important for you, just force the use of the JS API, this way you'll have the control. (There might be ways to make guesses about it by looking at the
window.screen object, but nothing too stable is available no..)– Kaiido
Jul 2 at 2:44
window.screen
ok thanks .i thought using this method now when full screen is created through f11 and users are pressing button i am going to create a notification(popup) and tell "press f11 to disable full screen" @kaiido
– Ajith
Jul 2 at 3:03
Unfortunately, F11 is not an universal key for this mode. On osX, it's "cmd + shift + F" or even just click on the expand button of the app's top-bar and on every OS I guess there is a "View > Enter Full Screen", hard to catch....
– Kaiido
Jul 2 at 3:04
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.
so, you're only having an issue with webkit browsers (like Chrome)?
– Jaromanda X
Jul 2 at 2:38