Javascript全屏在JSFiddle中不起作用答案

【问题标题】：Javascript fullscreen not working in JSFiddleJavascript全屏在JSFiddle中不起作用
【发布时间】：2016-10-31 11:31:49
【问题描述】：

我正在 JSFiddle 中测试全屏切换 (Javascript)，但它不工作。我正在使用 Chrome。

这是我的示例 JSFiddle：

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

有谁知道为什么切换全屏不起作用？

$('#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" />

【问题讨论】：

Full screen does not work in jsfiddle的可能重复

标签： javascript jquery html fullscreen

【解决方案1】：

您的代码有效。问题在于 JSFiddle，它阻止全屏工作。

具体来说，它不起作用，因为 JSFiddle 在 iframe 中运行您的代码。根据W3 spec：

要使嵌套浏览上下文中的内容能够全屏显示，需要通过 HTML iframe 元素的 allowfullscreen 属性特别允许。这可以防止例如来自第三方的内容在未经明确许可的情况下全屏显示。”

如果您使用此代码创建一个文件，然后在 chrome 中打开它，您会看到全屏可以正常工作。

<!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>

【讨论】：