Here's documentation on exiting fullscreen mode.
I used this code that I learnd to make the browser go fullscreen (it works), but my attempts to modify a version of it to exit fullscreen failed. Dealing with these non-standard APIs is a little tricky, with each browser implementing it a bit differently.
Here's the code:
// Bring the page into full-screen mode - Works!
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if ( typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
// Exit fullscreen - Doesn't work!
function exitFullScreen(element){
var requestMethod = element.exitFullscreen ||
element.mozCancelFullScreen ||
element.webkitExitFullscreen ||
element.msExitFullscreen;
if (requestMethod) {
requestMethod();
} else {
console.log("Oops. Request method false.");
}
}
And the calls:
var $fullscreenButton = $("#fullscreen-button");
var $smallscreenButton = $("#smallscreen-button");
$fullscreenButton.on("click", function() {
var elem = document.body;
// Make the body go full screen.
requestFullScreen(elem);
});
$smallscreenButton.on("click", function() {
var elem = document.body;
// Exit full screen.
exitFullScreen(elem);
});
What's wrong with the exitFullScreen function? How can I fix it?
Edit:
"Oops. Request method false."
exitFullScreen()
with the parameter document.body
JSFiddle:
While the full screen request function works for me in the browser normally, I could not get it to work in JSFiddle, and I'm unsure whether this is because of my own mistake, or something to do with JSFiddle.
Using the F11 key on your computer's keyboard will let you both enter and exit full-screen mode in many applications. If you use a laptop, you might need to press Fn + F11 to activate this keyboard shortcut.
exitFullscreen() The Document method exitFullscreen() requests that the element on this document which is currently being presented in fullscreen mode be taken out of fullscreen mode, restoring the previous state of the screen.
The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen mode once it is no longer needed.
requestFullscreen() (currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode. document. exitFullscreen() (currently prefixed in Chrome, Firefox and IE. Firefox uses cancelFullScreen() instead) cancels fullscreen mode.
For entering the fullscreen there were some issues with the capitalization.
For the exiting you need to call it on the document
and not on the body
, and you also need to apply it correctly instead of calling the reference to the method..
so requestMethod.call(element);
for exiting as well.
See demo at http://jsfiddle.net/gaby/FGX72/show
(tested on latest IE/Chrome/FireFox)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With