CODEWITHSUNDEEP
javascriptjqueryhtmlfullscreen
Richard
Richard

Reputation: 950

Javascript fullscreen not working in JSFiddle

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" />

Upvotes: 1

Views: 817

Answers (1)

asemahle
asemahle

Reputation: 20805

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>

Upvotes: 2

Related Questions