代码示例：（标识：event_fullscreenchange）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myP {
background-color: yellow;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>使用 JavaScript 实现全屏</h1>
<p>单击按钮以全屏模式打开此页面。</p>
<button onclick="openFullscreen();">进入全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏</button>
<p><b>提示：</b>按 "Esc" 键退出全屏。</p>
<p id="myP">我会显示被触发的事件！</p>
<script>
/* 获取您希望全屏显示的元素 */
var elem = document.documentElement;
/* 开启全屏模式的函数 */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem = window.top.document.body; //在 IE 中跳出框架
elem.msRequestFullscreen();
}
}
/* 关闭全屏模式的函数 */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
window.top.document.msExitFullscreen();
}
}
// 事件
var output = document.getElementById("myP");
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
document.addEventListener("mozfullscreenchange", function() {
output.innerHTML = "mozfullscreenchange event fired!";
});
document.addEventListener("webkitfullscreenchange", function() {
output.innerHTML = "webkitfullscreenchange event fired!";
});
document.addEventListener("msfullscreenchange", function() {
output.innerHTML = "msfullscreenchange event fired!";
});
</script>
<p class="note"><span>注释：</span>Internet Explorer 10 及更早版本不支持全屏模式。</p>
</body>
</html>
