We Keep Coding

Enter and exit fullscreen in browser using javascript

I'm working with chrome and I want a simple task. exiting fullscreen using code, not F11 key press.
Here are some documentations about how to implement it:
https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
None of the above methods work. And also lots of non-working answers on Stackoverflow. Please help I really need to solve this.
Here is CodePen.
Here is the code I'm trying:
const button = document.getElementById('exitId');
button.addEventListener("click", function(){
// Javascript Code To Exit Fullscreen Goes Here
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
});
<button id="exitId">Exit Fullscreen</button>

A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.
JavaScript Function
/**
* Toggle fullscreen function who work with webkit and firefox.
* #function toggleFullscreen
* #param {Object} event
*/
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
<button onclick="toggleFullscreen();">Full Screen</button>

Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.
The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.
If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.
Check the following code:
<div id="container">
<button id="toggle">Toggle Fullscreen</button>
</div>
====
button.addEventListener("click", function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (container.requestFullscreen) {
container.requestFullscreen();
}
else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
}
else if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
}
});
You can see a working solution here: https://jsfiddle.net/zpdwL8gt/4/
Checked on firefox & chrome # MacOS

js fullscreen toggle button goes to fullscreen but won't exit it

I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?

The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle

Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!

Cannot detect ESC button on Chrome (packaged) app (while fullscreen)

Sounds easy but an absolutely nightmare. I cannot detect the escape button being pressed. I need to know if the fullscreen mode is exited as you cannot block the escape button from being pressed. The javascript is injected to a HTML which loads in a webview.
$(document).keyup(function(e) {
if (e.keyCode === 27) {
console.log("esc pressed")
}
});
This only works when the view is not fullscreen!
Going fullscreen:
$('#fullscreen-button').unbind("click").on('click', function(){
viewer.setFullscreen();
});
setFullscreen: function() {
if(!viewer.isFullScreen()) {
console.log("window fullscreen --> ",viewer.isFullScreen());
document.body.webkitRequestFullscreen();
$("#presenter, #slide-container .owl-item").addClass('fullscreen tenTwenty');
$("#viewer-container, #slide-container").addClass('fullscreen thirteenSix');
$('.fullscreen').width(screen.width);
$('.fullscreen').height(screen.height);
$('#slide-container').trigger('refresh.owl.carousel');
} else {
document.webkitCancelFullScreen();
console.log("window fullscreen --> ",viewer.isFullScreen());
$('.tenTwenty').width(1024); $('.tenTwenty').height(768);
$('.thirteenSix').width(1366); $('.thirteenSix').height(768);
$("#presenter, #viewer-container, #slide-container, #slide-container .owl-item").removeClass('fullscreen tenTwenty thirteenSix');
$('#slide-container').trigger('refresh.owl.carousel');
}
},
isFullScreen: function(){
if ( document.webkitFullscreenElement) {
return true;
} else {
return false;
}
},

Since you are using jQuery, you can add a listener to check the change of fullscreen state. It doesn't tell you if it's opening or closing the fullscreen, but you can check all states like this:
// you only need "webkitfullscreenchange" if it's only a chrome app
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
if(!viewer.isFullScreen()) {
// you are out of fullscreen
} else {
// you are in fullscreen
}
});
EDIT:
As we talk in comments, vanilla js fits perfectly:
document.addEventListener('webkitfullscreenchange', function(e) {});

IE11 doesn't listen to MSFullscreenChange event

I am trying to use fullscreen in IE11 using Bigscreen.js.
But IE11 doesnt listen to "MSFullscreenChange" event.
document.addEventListener("MSFullscreenChange", function () {
if (document.msFullscreenElement != null) {
console.info("Went full screen");
} else {
console.info("Exited full screen");
}
});
Putting this in console, it prints nothing on fullscreen.
What is the alternate way to detect this event?

Actually, the Microsoft documentation is wrong.
I'm testing against IE11 and it doesn't have the MSFullscreenChange event listener. Instead, it has the onmsfullscreenchange event handler.
So, just change this and your code should work.

I had a similar problem in my word game, the MSFullscreenChange listener was not called in Internet Explorer 11:
To fix the problem I had to attach the listener to the document instead of the DOM element (#fullDiv in my case). Even though all the other listeners where attached to the DOM element going fullscreen:
var domElem = document.getElementById('fullDiv');
domElem.addEventListener('fullscreenchange', updateFullCheck);
domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
domElem.addEventListener('mozfullscreenchange', updateFullCheck);
document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11
Below is my complete code working in IE11, Edge, Safari/MacOS, Chrome, Firefox, Opera:
'use strict';
function isFullscreenEnabled() {
return document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled;
}
function getFullscreenElement() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
jQuery(document).ready(function($) {
if (isFullscreenEnabled()) {
function updateFullCheck() {
if (getFullscreenElement()) {
$('#fullCheck').prop('checked', true).checkboxradio('refresh');
$('#leftDiv').css('padding', '24px 0 24px 24px');
$('#rightDiv').css('padding', '24px 24px 24px 0');
} else {
$('#fullCheck').prop('checked', false).checkboxradio('refresh');
$('#leftDiv').css('padding', '0');
$('#rightDiv').css('padding', '0');
}
}
var domElem = document.getElementById('fullDiv');
domElem.addEventListener('fullscreenchange', updateFullCheck);
domElem.addEventListener('webkitfullscreenchange', updateFullCheck);
domElem.addEventListener('mozfullscreenchange', updateFullCheck);
document.addEventListener('MSFullscreenChange', updateFullCheck); // IE 11
$('#fullCheck').checkboxradio().click(function(ev) {
ev.preventDefault();
ev.stopPropagation();
if (getFullscreenElement()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (domElem.requestFullscreen) {
domElem.requestFullscreen();
} else if (domElem.mozRequestFullScreen) {
domElem.mozRequestFullScreen();
} else if (domElem.webkitRequestFullscreen) {
domElem.webkitRequestFullscreen();
} else if (domElem.msRequestFullscreen) {
domElem.msRequestFullscreen();
}
}
}).checkboxradio('enable');
}
});

If I navigate to http://brad.is/coding/BigScreen/, launch F12 Developer Tools, paste your script into the console, and click the “Run script” button, clicking the demo image displays the "Went full screen" message in the console as expected.
When pasting multiline scripts in the console, you have to click the “Run script” button or press Ctrl + Enter to actually submit the script for execution. Just pressing the Enter key inserts a newline in the script. Alternatively, you can change the script to be single-line. In this case, pressing the Enter key will submit the script for execution.
Disclosure: I am on the team that worked on Microsoft's implementation of the Fullscreen API.

Fullscreen on load

my question is simple: Is there an easy way to load a webpage in fullscreenmode (like when you press F11) at the very first time you enter it? (Without pressing F11, or an specific buttom to go fullscreen)
This is for a presentation (Like a powerpoint presentation) I made using HTML/CSS (My customer wanted something more 'dynamic' than the regular powerpoint stuff) so there are no 'violations' nor user experience problems, since it won't be online and will only be used for congresses and internal meetings.
Thanks in advance!

Recently I also faced this problem.
For latest versions of browsers like Chrome,Mozilla you can use webkit
uhttps://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
but probelm lies with i.e and safari.As in i.e this full scrren api is not supported and in safari you can't user key input in fullscreen mode(consider case when you ask user the slide you want to visit).Under code should help.
in case of js do something like
function requestFullScreen(image1) {
var image = document.getElementById(image1);
image.style.width=(0.70*screen.width)+'px';
image.style.height=(0.96*screen.height)+'px';
// Get the element that we want to take into fullscreen mode
var element = parent.document.getElementById('imageFullScreen');
if(element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
element.webkitRequestFullScreen();
}else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
document.getElementById('imageFullScreen').style.width="100%";
document.getElementById('imageFullScreen').style.height="100%";
image.style.height=(0.96*$(window).height())+"px";
document.getElementById('showFullScreen').style.display='none';
document.getElementById('cancelFullScreen').style.display='inline';
document.getElementById("ieCheck").value="true";
}
}
//to close full screen manually
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (typeof window.ActiveXObject !== "undefined"){
IEtoggleSmallScreen();
}
}
//listners to change at full screen and small screen
document.addEventListener("fullscreenchange", function () {
if(document.fullScreen){
document.getElementById('showFullScreen').style.display='none';
document.getElementById('cancelFullScreen').style.display='inline';
}else{
document.getElementById('showFullScreen').style.display='inline';
document.getElementById('cancelFullScreen').style.display='none';
}
});
document.addEventListener("mozfullscreenchange", function () {
if(document.mozFullScreen){
document.getElementById('showFullScreen').style.display='none';
document.getElementById('cancelFullScreen').style.display='inline';
}else{
document.getElementById('showFullScreen').style.display='inline';
document.getElementById('cancelFullScreen').style.display='none';
}
});
document.addEventListener("webkitfullscreenchange", function () {
if(document.webkitIsFullScreen){
document.getElementById('showFullScreen').style.display='none';
document.getElementById('cancelFullScreen').style.display='inline';
}else{
document.getElementById('showFullScreen').style.display='inline';
document.getElementById('cancelFullScreen').style.display='none';
}
});
//to change screen size in i.e
function IEtoggleSmallScreen(){
document.getElementById('showFullScreen').style.display='inline';
document.getElementById('cancelFullScreen').style.display='none';
document.getElementById('imageFullScreen').style.width=638+"px";
document.getElementById('imageFullScreen').style.height=479+"px";
}
// toc check esc functuonlaity for ie
$(document).keyup(function(e) {
if (e.keyCode == 27) {
var check = document.getElementById("ieCheck");
if(check.value=="true"){
IEtoggleSmallScreen();
check.value="false";
}
}
});
Now for html do like
<div id="imageFullScreen" class="imageFullScreen" style="width: 700px;height:400px;background-color:blue; center;text-align: center;" >
<img id="image" src="<%=imageUrl%>=1" style="max-height: 96%;max-width: 100%;width: 100%;height: 100%">
<div id="btnCentre" style="text-align: center;">
<input type="hidden" id="ieCheck" value="false">
<input type="button" value="Full Screen" onclick="requestFullScreen('image');" id="showFullScreen" style="max-height: 4%">
<input type="button" value="Cancel Screen" onclick="cancelFullscreen();" id="cancelFullScreen" style="display: none;" style="max-height: 4%">
</div>
</div>