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

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.

<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="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;"
}

CodePudding user response：

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>