Question

0

258

Views

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);

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T06:54:29.555Z

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 :

Store fullscreen and normal mode CSS in 2 separate variables
Create 2 functions, enterFullscreen and exitFullScreen
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

Add an event listener for keydown events
When the event is triggered, check the key in the event.
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>

0

258

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

1 answers

0

Find remote jobs

Andres GPT