revision:
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. This usually reverses the effects of a previous call to Element.requestFullscreen().
document.exitFullscreen()
Parameters: none
document.onclick = (event) => {
if (document.fullscreenElement) {
document
.exitFullscreen()
.then(() => console.log("Document Exited from Full screen mode"))
.catch((err) => console.error(err));
} else {
document.documentElement.requestFullscreen();
}
};
<div>
<button id="exit-btn">exit button</button>
</div>
<script>
const exitBtn = document.getElementById('exit-btn');
exitBtn.addEventListener('click', ()=>{
if (document.fullscreenElement) {
document.exitFullscreen();
}
});
</script>
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
<div>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode.
Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
</div>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
<div>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it
by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button class="btn" onclick="openFullscreen();">Open Fullscreen</button>
<button class="btn" onclick="closeFullscreen();">Close Fullscreen</button>
</div>
<style>
:-webkit-full-screen { background-color: yellow;}
/* IE11 syntax */
:-ms-fullscreen {background-color: yellow;}
/* Standard syntax */
:full-screen {background-color: yellow;}
/* Style the button */
button.btn{padding: 2vw; font-size: 2vw;}
</style>
<script>
var elem1 = document.documentElement;
function openFullscreen() {
if (elem1.requestFullscreen) {
elem1.requestFullscreen();
} else if (elem1.webkitRequestFullscreen) { /* Safari */
elem1.webkitRequestFullscreen();
} else if (elem1.msRequestFullscreen) { /* IE11 */
elem1.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>