Javascript DOM HTML Element requestFullscreen() Method display html page

Introduction

To open the HTML page in full screen, use the document.documentElement instead of document.getElementById("element").

In this example, we also use a close function to close the full screen:

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  v a2  s . co 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>



PreviousNext

Related