JavaScript function that can be used to exit fullscreen mode on a webpage

Rumman Ansari   Software Engineer   2023-03-26   177 Share
☰ Table of Contents

Table of Content:

Here is a JavaScript function that can be used to exit fullscreen mode on a webpage: 


function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

To use this function, you can call it from an event handler, such as a button click or a key press. For example: 


document.getElementById("myButton").addEventListener("click", exitFullscreen);

This will exit fullscreen mode when the button with the ID "myButton" is clicked.

Note that the fullscreen mode is only supported by modern web browsers, and it requires the user's permission. The user can exit fullscreen mode by pressing the "Esc" key or by clicking the "Exit fullscreen" button (if available).

I hope this helps! Let me know if you have any questions or need further assistance.

Full Code in one place both make full screen and exit from full screen. 


<!DOCTYPE html>
<html>
<body>

<h2>Java Script Full Screen</h2> 
<button type="button" id = "myButton"> Full Screen </button> 
<button type="button" id = "myButton1"> Exit Full Screen </button>

</body>
</html> 


<script>
document.getElementById("myButton").addEventListener("click", makeFullscreen);
document.getElementById("myButton1").addEventListener("click", exitFullscreen);

function makeFullscreen() {
  var element = document.documentElement;
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>
‹ Previous -   make fullscreen
Next › -   Event Listener in javascript