Toggle Fullscreen exit

Question

I have the following javascript that is triggered by a button in my HTML:

function toggleFullScreen(){

    if(v.requestFullScreen){
        v.requestFullScreen();
    }
    else if(v.webkitRequestFullScreen){
        v.webkitRequestFullScreen();
    }
    else if(v.mozRequestFullScreen){
        v.mozRequestFullScreen();
    }
}

How can I extend this JS code to incorporate the ability to exit fullscreen? What are the best practices for this?

Use [screenfull.js](https://github.com/sindresorhus/screenfull.js), have a look at the [demo](https://sindresorhus.com/screenfull.js). — Code4R7, Jun 27 '19 at 11:03

score 19 · Accepted Answer · answered Jan 22 '14 at 11:09

There is actually a fully functional example on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode

Quote:

Toggling fullscreen mode

This code is called when the user hits the Enter key, as seen above.
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, and webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either element.mozRequestFullScreen() msRequestFullscreen()or webkitRequestFullscreen(), depending on which is available.

If fullscreen mode is already active (fullscreenElement is non-null), we call document.mozCancelFullScreen(), msExitFullscreen or webkitExitFullscreen(), again depending on which browser is in use.

just about to post this code, brilliant resource, thanks for being so prompt! will accept in 2 mins, reputation++ :) — cwiggo, Jan 22 '14 at 11:10
This will only work if the fullscreen was requested for some element. If the fullscreen is initiated by the browser itself (e.g. when the user presses F11), this will not work. — birgersp, Nov 25 '19 at 07:28

score 3 · Answer 2 · edited Jun 15 '17 at 10:33

3

Have you try something from this ?

exitFullscreen();
mozCancelFullScreen();
webkitExitFullscreen();
msExitFullscreen();

Look there :

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

or:

http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html

Is this enough helpful for you ?

edited Jun 15 '17 at 10:33

serv-inc

35,772
9
166
188

answered Jan 22 '14 at 11:00

Makromat

1,540
5
26
47

How can I adapat these functions to my code? I've been trying for the last hour :) – cwiggo Jan 22 '14 at 11:03
Thanks for the prompt reply, I've retrieved the functions needed! – cwiggo Jan 22 '14 at 11:14
No problem :) Can you mark my answer with thick ? Thanks a lot – Makromat Jan 22 '14 at 11:15
@Chris Code is from website what I sent you :D This was theft :D – Makromat Jan 22 '14 at 11:17

score 1 · Answer 3 · answered Jan 22 '14 at 16:50

Get jQuery from: http://jquery.com/download/
Get screenfull.min.js from: https://github.com/sindresorhus/screenfull.js/
‎Include them in <head>...</head>
Assign an id to <body> ex. mainBody

Place the function before the closing body tag ie. </body>

<script src="js/jquery.js"></script> 
<script src="js/screenfull.min.js"></script> 
</head>

<body id="mainBody">
<!--[whatever]-->
<script>
             $(function tScreen()
             {
              if(!screenfull.enabled) 
              { return false; }
              screenfull.request(document.getElementById('mainBody'));
             });

             $('#toggle').click(function () 
             { screenfull.toggle($('#mainBody')[0]);});
       </script>
</body>
</html>

Toggle Fullscreen exit

3 Answers3

Linked