Javascript fullscreen not working in JSFiddle

Question

I am testing fullscreen toggle (Javascript) in JSFiddle and it is not working. I am using Chrome.

Here is my sample JSFiddle:

https://jsfiddle.net/richardcwc/99874pyx/

Does anyone know why toggle fullscreen does not work?

$('#button').on('click',function() {
 if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
  alert('exit fullscreen');
  if(document.exitFullscreen) {
   document.exitFullscreen();
  } else if(document.msExitFullscreen) {
   document.msExitFullscreen();
  } else if(document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
   document.webkitExitFullscreen();
  }
 } else {
  alert('enter fullscreen');
  if(document.documentElement.requestFullscreen) {
   document.documentElement.requestFullscreen();
  } else if(document.documentElement.webkitRequestFullscreen) {
   document.documentElement.webkitRequestFullscreen();
  } else if(document.documentElement.mozRequestFullScreen) {
   document.documentElement.mozRequestFullScreen();
  } else if(document.documentElement.msRequestFullscreen) {
   document.documentElement.msRequestFullscreen();
  }
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="test fullscreen toggle" />

Possible duplicate of [Full screen does not work in jsfiddle](http://stackoverflow.com/questions/27984410/full-screen-does-not-work-in-jsfiddle) — Abhishek, Jun 29 '16 at 09:12

asemahle · Answer 1 · 2016-06-29T00:25:30.297

Your code works. The problem is with JSFiddle, which is preventing fullscreen from working.

Specifically, it doesn't work because JSFiddle runs your code in an iframe. According to the W3 spec:

To enable content in a nested browsing context to go fullscreen, it needs to be specifically allowed via the allowfullscreen attribute of the HTML iframe element. This prevents e.g. content from third parties to go fullscreen without explicit permission."

If you make a file with this code, and then open it in chrome, you'll see that fullscreen works.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
</head>
<body>
    <input type="button" id="button" value="test fullscreen toggle" />
</body>

<script>
$(document).ready(function() {
    $('#button').on('click',function() {
        if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement) { //in fullscreen, so exit it
            alert('exit fullscreen');
            if(document.exitFullscreen) {
                document.exitFullscreen();
            } else if(document.msExitFullscreen) {
                document.msExitFullscreen();
            } else if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if(document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        } else { //not fullscreen, so enter it
            alert('enter fullscreen');
            if(document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if(document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            } else if(document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if(document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            }
        }
    });
})
</script>

</html>

Javascript fullscreen not working in JSFiddle

1 Answers1