CODEWITHSUNDEEP
javascriptgoogle-chrome
foxer
foxer

Reputation: 901

Enter and exit full screen in browser using JavaScript

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>

Upvotes: 9

Views: 6369

Answers (2)

Lyn Robert
Lyn Robert

Reputation: 371

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>

Upvotes: 6

Dekel
Dekel

Reputation: 62676

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

Upvotes: 0

Related Questions