title: How to exit fullscreen onclick using Javascript?
body: <p>Not sure if the following code snip will work embedded on SO, as it didn't work when pasting it, however it does work stand-alone.</p>
  
  <p>The problem, is I want this to be a toggle; not just to enter fullscreen mode, but to exit it if the user is in fullscreen.  It goes into fullscreen mode perfectly, and executes the exit fullscreen code (as the <code>alert()</code> box is shown which runs after the exit code but inside the exit code condition only) yet it does nothing.</p>
  
  <p>I have read up on this <a href="http://www.sitepoint.com/use-html5-full-screen-api/" rel="noreferrer">here</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API" rel="noreferrer">here</a> which seems that I am doing everything correct, but something is missing. Could you please assist in figuring out how to make this procedural code work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fullscreen() {
   var isInFullScreen = (document.fullscreenElement &amp;&amp; document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement &amp;&amp; document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement &amp;&amp; document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement &amp;&amp; document.msFullscreenElement !== null);
  
   var docElm = document.documentElement;
   if (!isInFullScreen) {
    if (docElm.requestFullscreen) {
     docElm.requestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
     docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
     docElm.webkitRequestFullScreen();
    } else if (docElm.msRequestFullscreen) {
     docElm.msRequestFullscreen();
    }
   } else {
    if (docElm.exitFullscreen) {
     docElm.exitFullscreen();
    } else if (docElm.webkitExitFullscreen) {
     docElm.webkitExitFullscreen();
    } else if (docElm.mozCancelFullScreen) {
     docElm.mozCancelFullScreen();
    } else if (docElm.msExitFullscreen) {
     docElm.msExitFullscreen();
    }
    alert('exit fullscreen, doesnt work');
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a onclick="fullscreen()" href="javascript:void(0);"&gt;Toggle FullScreen&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried adding <code>parent.exitfs()</code> where the alert code is, according to <a href="https://stackoverflow.com/questions/12400912/exit-from-full-screen-not-working">this questions accepted answer</a> and still has no impact</p>