CODEWITHSUNDEEP
javascripthtmlcssiframe
Evija
Evija

Reputation: 11

How to exit fullscreen on pressing ESC or by toggling the fullscreen button

In the below snippet, when "Make a fullscreen" button is pressed, the iFrame enters fullscreen mode. I'm looking for a solution to exit fullscreen mode on pressing "ESC" or by pressing "Make fullscreen button" again.

<button onclick="makeFullscreen('game');">[Make a fullscreen]</button>

function makeFullscreen(id){
    var el = document.getElementById(id);
    el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
}

Fully working

const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:99999;"

const normalStyle = "width:1000px;height:700px;border:0;"

function enterFullScreen(el) {
  el.style = fullscreenStyle;
  document.querySelector('.button1').style = 'position:absolute;top:0;right:0;z-index:999999;';
}

function exitFullScreen(el) {
  el.style = normalStyle;
  document.querySelector('.button1').style = 'position:absolute;top:auto;right:auto;';
}


function toggleFullScreen() {
  var el = document.getElementById("game");
  if (el.style.position === "fixed") {
    exitFullScreen(el);
  } else {
    enterFullScreen(el);
  }
}

document.addEventListener("keydown", function(e) {
  if (e.key === "Escape") {
    var el = document.getElementById("game");
    exitFullScreen(el);
  }  
}, false);

Upvotes: 1

Views: 2634

Answers (1)

Tyler Durden
Tyler Durden

Reputation: 1070

Since Fullscreen API is out, another solution can be that instead of binding Make a Fullscreen logic to the button, bind the logic for toggling full screen. For that :

  1. Store fullscreen and normal mode CSS in 2 separate variables
  2. Create 2 functions, enterFullscreen and exitFullScreen
  3. Create a 3rd function toggleFullScreen that checks the mode and does the following :
  • If fullscreen mode is ON, call exitFullscreen
  • Else call enterFullScreen

To implement exit on pressing ESC

  1. Add an event listener for keydown events
  2. When the event is triggered, check the key in the event.
  3. If the key matches Escape, call exitFullScreen

The following solution does the same.

<!DOCTYPE html>
<html lang="en">
<body>
  <iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/">
  </iframe>
  <button onclick="toggleFullScreen('game');">
     [Toggle fullscreen] 
  </button>
</body>
<script type="text/javascript">
 const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
 const normalStyle = "width:1000px;height:700px;border:0;"

 function enterFullScreen(el) {
    el.style = fullscreenStyle;
 }

 function exitFullScreen(el) {
    el.style = normalStyle;
 }

 function toggleFullScreen() {
   var el = document.getElementById("game");
   if (el.style.position === "fixed") {
     exitFullScreen(el);
   } else {
     enterFullScreen(el);
   }
 }

 document.addEventListener("keydown", function(e) {
   if (e.key === "Escape") {
     var el = document.getElementById("game");
     exitFullScreen(el);
   }  
 }, false);
</script>
</html>

Upvotes: 1

Related Questions