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

How can I use the full screen with trigger script?

It's not working fullscreen when triggering a click. It opens the new page when I clicked the Icon or image. The new page shows fullscreen without any click, but it's not changed the full screen.
<button id="test" onclick="launchFullscreen(document.documentElement);">Click Me</button>
var ele = document.getElementById('test');
ele.click();
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

In newer versions of browsers, you can use this script.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
} }
HTML Button:
<button onclick="requestFullScreen(document.body)">Go Fullscreen</button>
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Javascript fullscreen closes on changing page

I have a button that helps me to open a page in full screen. But when I leave the page the script closes the fullscreen.
Does someone know how I can stay fullscreen when I go to another page?
Here is my full script:
<script type="text/javascript">
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>

It cannot be done.
From - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
In addition, navigating to another page, changing tabs, or switching
to another application (using, for example, Alt-Tab) while in
fullscreen mode exits fullscreen mode as well.
Update -
F11 - makes browser into full screen mode which does not utilize Fullscreen API

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!

Fullscreen not working in IE

So I have my slider module up and running but Internet Explorer 11 is not responding to the fullscreen button. Firefox and Chrome are working just fine. I found this code on Stack but still no difference. Any thoughts?
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
Sorry if this question has been answered. I haven't found the solution.

According to this site the fullscreen API is not supported in IE. There seem to be no information on whether this is something that will be supported by IE11 either.
According to MDN's article on fullscreen it seems that this technique is still be very much experimental for most browsers.
You could also try this
Internet Explorer full screen mode?
Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
<script type="text/javascript">
function max() {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}
</script>
if you really want to have the full screen in internet explorer.... Try giving the slider wiidth and height 100% in jquery.