代码示例:(标识:jsck_element_requestfullscreen_exit)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>通过 JavaScript 实现全屏</h1>
<p>请单击“打开全屏”按钮,以全屏模式打开此页面。可通过单击键盘上的“Esc”键或“关闭全屏”按钮将其关闭。</p>
<button onclick="openFullscreen();">打开全屏</button>
<button onclick="closeFullscreen();">关闭全屏</button>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
<p>注释:Internet Explorer 10 及更早版本不支持全屏模式。</p>
</body>
</html>