8

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:

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>  

10
  • 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
    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
    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
    Apr 24, 2020 at 16:33
  • Yeah, you're right mine too... But this is unfortunate for me not interesting :(
    – foxer
    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
    Apr 24, 2020 at 16:41

2 Answers 2

5

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>

0

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.net/zpdwL8gt/4/

Checked on firefox & chrome @ MacOS

2
  • in your code go fullscreen using F11 and try to toggle fullscreen using the button, you'll see that it doesn't work...
    – foxer
    Apr 29, 2020 at 10:21
  • You can only toggle-off fullscreen using javascript if you entered the fullscreen mode using javascript. I'm not sure why you decided to down-vote the answer. I'll add a note about this.
    – Dekel
    Apr 29, 2020 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.