I'm working with Chrome and I want a simple task. Exiting full screen using code, not F11 key press.

Here are some documentations about how to implement it:

• .asp

None of the above methods work. And also lots of non-working answers on Stack Overflow. Please help, I really need to solve this.

Here is CodePen.

Here is my code:

const button = document.getElementById('exitId');
button.addEventListener("click", function(){
  // JavaScript Code To Exit Fullscreen Goes Here
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
  
});

<button id="exitId">Exit Fullscreen</button>  

I'm working with Chrome and I want a simple task. Exiting full screen using code, not F11 key press.

Here are some documentations about how to implement it:

• https://www.w3schools./jsref/met_element_exitfullscreen.asp
• https://developer.mozilla/en-US/docs/Web/API/Fullscreen_API

None of the above methods work. And also lots of non-working answers on Stack Overflow. Please help, I really need to solve this.

Here is CodePen.

Here is my code:

const button = document.getElementById('exitId');
button.addEventListener("click", function(){
  // JavaScript Code To Exit Fullscreen Goes Here
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
  
});

<button id="exitId">Exit Fullscreen</button>  

• javascript
• google-chrome

• 1 I had posted an answer with code that's always worked for me, but after I posted it I looked back at your code, and it's very much the same (so I deleted my post). Is there a particular browser that it's not working on for you? – kshetline Commented Apr 24, 2020 at 16:22
• I'm using chrome and I tested the code in Firefox. None of them work... The issue is that this method doesn't work and I think this is a bug : document.webkitExitFullscreen(); – foxer Commented Apr 24, 2020 at 16:25
• 1 Interesting... what I just discovered is that my code works if and only if I use similar code to set full screen mode in the first place. If full screen mode is established using F11 instead, then my code has no effect. – kshetline Commented Apr 24, 2020 at 16:33
• Yeah, you're right mine too... But this is unfortunate for me not interesting :( – foxer Commented Apr 24, 2020 at 16:35
• Also ESC key doesn't work (to exit fullscreen) if we go fullscreen using F11!!! What is going on there?! I HATE F11... – foxer Commented Apr 24, 2020 at 16:41

2 Answers 2

A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.

JavaScript Function

/**
 * Toggle fullscreen function who work with webkit and firefox.
 * @function toggleFullscreen
 * @param {Object} event
 */
function toggleFullscreen(event) {
  var element = document.body;

  if (event instanceof HTMLElement) {
    element = event;
  }

  var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;

  element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
    return false;
  };
  document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
    return false;
  };

  isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}

<button onclick="toggleFullscreen();">Full Screen</button>

Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.

The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.

If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.

Check the following code:

<div id="container">  
  <button id="toggle">Toggle Fullscreen</button>
</div>

====

button.addEventListener("click", function() {
    if (document.fullscreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    } else {
        if (!document.mozFullScreen && !document.webkitFullScreen) {
            if (container.requestFullscreen) {
                container.requestFullscreen();
            }
            else if (container.mozRequestFullScreen) {
                container.mozRequestFullScreen();
            }
            else if (container.webkitRequestFullScreen) {
                container.webkitRequestFullScreen();
            }
            else if (container.msRequestFullscreen) {
                container.msRequestFullscreen();
            }
        }
    }
});

You can see a working solution here: https://jsfiddle/zpdwL8gt/4/

Checked on firefox & chrome @ MacOS