Problem Description #

I’ve got a setup where pressing the F key makes a specific HTML element enter fullscreen mode, but I want to turn this into a toggle—pressing F again should exit fullscreen. Here’s my current code:

HTML:

<div id="test"> hello </div>

JavaScript:

// go fullscreen when pressing 'f' (key 70)
document.onkeydown = function(e){
 e = e || window.event;
 var key = e.which || e.keyCode;
 if(key===70){
 requestFullScreen( document.getElementById("test") );
 }
};
function requestFullScreen(elt) {
 console.log("Requesting fullscreen for", elt);
 if (elt.requestFullscreen) {
 elt.requestFullscreen();
 } else if (elt.msRequestFullscreen) {
 elt.msRequestFullscreen();
 } else if (elt.mozRequestFullScreen) {
 elt.mozRequestFullScreen();
 } else if (elt.webkitRequestFullscreen) {
 elt.webkitRequestFullscreen();
 } else {
 console.error("Fullscreen not available");
 }
}

I need to check if the target element is currently in fullscreen mode so I can toggle between entering and exiting when F is pressed.

Solution #

To build this toggle functionality, we need two key additions: a way to check if our element is active in fullscreen, and a cross-browser function to exit fullscreen. Here’s how to adjust your code:

1. Add a helper to check fullscreen state
   Different browsers use prefixed properties for the active fullscreen element. We’ll check all of them to confirm if our target is the one in fullscreen.

2. Add an exit fullscreen function
   Just like entering fullscreen, exiting requires handling browser-specific methods.

3. Update the keydown handler to toggle
   First check if we’re in fullscreen—if yes, exit; if not, enter. We’ll also prevent the default F key behavior (like opening a find dialog) to avoid conflicts.

Here’s the complete modified code:

HTML (unchanged):

<div id="test"> hello </div>

Modified JavaScript:

const targetElement = document.getElementById("test");

// Toggle fullscreen when pressing 'f' (key 70)
document.onkeydown = function(e){
 e = e || window.event;
 const key = e.which || e.keyCode;
 if(key === 70){
   // Block default browser F key action
   e.preventDefault();
   
   if (isElementInFullscreen(targetElement)) {
     exitFullscreen();
   } else {
     requestFullScreen(targetElement);
   }
 }
};

function requestFullScreen(elt) {
 console.log("Requesting fullscreen for", elt);
 if (elt.requestFullscreen) {
   elt.requestFullscreen();
 } else if (elt.msRequestFullscreen) {
   elt.msRequestFullscreen();
 } else if (elt.mozRequestFullScreen) {
   elt.mozRequestFullScreen();
 } else if (elt.webkitRequestFullscreen) {
   elt.webkitRequestFullscreen();
 } else {
   console.error("Fullscreen not available");
 }
}

function exitFullscreen() {
 console.log("Exiting fullscreen");
 if (document.exitFullscreen) {
   document.exitFullscreen();
 } else if (document.msExitFullscreen) {
   document.msExitFullscreen();
 } else if (document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
 } else if (document.webkitExitFullscreen) {
   document.webkitExitFullscreen();
 } else {
   console.error("Cannot exit fullscreen");
 }
}

function isElementInFullscreen(elt) {
 // Check all browser-specific fullscreen element properties
 const fullscreenElement = document.fullscreenElement || 
                           document.msFullscreenElement || 
                           document.mozFullScreenElement || 
                           document.webkitFullscreenElement;
 // Return true only if our target is the active fullscreen element
 return fullscreenElement === elt;
}

Key Notes #

• The e.preventDefault() line stops browsers from opening their default find dialog when F is pressed, which would interfere with our toggle.
• The isElementInFullscreen function ensures we only toggle for our specific element—this matters if other elements in your app might trigger fullscreen separately.
• All cross-browser prefixes are handled for both entering and exiting fullscreen, so the code works across older and modern browsers.

内容的提问来源于stack exchange，提问作者Dirk J. Faber