Toggle Fullscreen exit

javascript html toggle fullscreen

10,596

Solution 1

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.

Solution 2

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 ?

Solution 3

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>

10,596

Author by

cwiggo

BSC in Comp Science, Drummer, Judo Practitioner, Music. Based in Kenda, Cumbria, UK. PHP MySql HTML CSS Bootstrap AngularJS Javascript jQuery Android Studio Java SDK Swift XCode Adobe Suite Debian SCSS I've experience in all of the above so if you need help just message me using my connect: @cwiggo on twitter. Currently working on a corporate website. My Questions need answers! :)

Updated on June 04, 2022

Comments

cwiggo almost 2 years
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?
- Code4R7 almost 5 years
  
  Use screenfull.js, have a look at the demo.
cwiggo about 10 years

How can I adapat these functions to my code? I've been trying for the last hour :)
cwiggo about 10 years

just about to post this code, brilliant resource, thanks for being so prompt! will accept in 2 mins, reputation++ :)
cwiggo about 10 years

Thanks for the prompt reply, I've retrieved the functions needed!
Makromat about 10 years

No problem :) Can you mark my answer with thick ? Thanks a lot
Makromat about 10 years

@Chris Code is from website what I sent you :D This was theft :D
birgersp over 4 years

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.