I need feature of activating fullscreen and deactivating fullscreen and every thing works great when i use document.requestFullScreen and document.cancelFullScreen API. But when user activate fullscreen using F11 then document.cancelFullScreen API doesn't work as i wants.
I tried finding and testing many stackoverflow answers but none of those helped me. I wants to reverse/cancel the fullscreen effect of F11 key press done by user.
Here is demo i created where you can see that issue code sand box ,in this sandbox just open output in new separate window/tab, then press F11 which will activate fullscreen, now try to press 'Go Fullscreen' i provided which is not able to exit fullscreen effect.
I have tried this method it is working fine as on my try, I have add code bellow, also I have create new file in your code sand box called "test.html", and also here is the result link. Hope it will be the solution for your trouble.
<!DOCTYPE html>
<html>
<head>
<style>
.full-container {
background-color: yellow;
}
</style>
</head>
<body>
<div id="full-container" class="full-container">
Open this page in New Window to see effect of button
<button onclick="goFullscreen()">go FullScreen</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var fullScreenMod = false;
$(document).on("keydown", function (ev) {
if (ev.keyCode === 27 || ev.keyCode === 122) {
goFullscreen();
return false;
}
});
/* Standard syntax */
document.addEventListener("fullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
function goFullscreen() {
console.log("fullscreen called");
let topContainer = document.getElementById("full-container");
let isWholeFullScreen = fullScreenMod;
if (isWholeFullScreen == false) {
isWholeFullScreen = !isWholeFullScreen;
if (topContainer.requestFullScreen) {
topContainer.requestFullScreen();
} else if (topContainer.mozRequestFullScreen) {
topContainer.mozRequestFullScreen();
} else if (topContainer.webkitRequestFullScreen) {
topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (topContainer.msRequestFullscreen) {
topContainer.msRequestFullscreen();
}
} else {
isWholeFullScreen = !isWholeFullScreen;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
</html>