Javascript DOM HTML Element exitFullscreen() Method

Introduction

Open the HTML page in full screen mode, and close it with a button:

Click on the "Open Full screen" button to open this page in full screen mode.

Close it by either clicking the "Esc" key on your keyboard, or with the "Close Full screen" button.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>//from  w w  w .j  a  va 2s  .  c  o  m
<body>

<h2>Fullscreen with JavaScript</h2>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>
</body>
</html>

The exitFullscreen() method cancels an element in full screen mode.

This method requires specific prefixes to work in different browsers.

Use the requestFullscreen() method to open an element in full screen mode. 

element.exitFullscreen()



PreviousNext

Related