[TOC]
代码示例1
1. 页面局部区域全屏显示
1、先判断页面是否已经全屏了，没有再触发全屏。document.fullscreenElement方法用来判断是否在全屏状态。
2、主要使用元素的requestFullscreen()方法调用，这个方法返回类似于Promise类型的处理方法。
3、添加元素的fullscreenchange 来监听进入全屏、退出全屏触发事件
<style>
#module { width: 600px; height: 300px;
background-color: #4CAF50;
color: white; text-align: center;
padding: 20px; margin: 50px auto;
}
button { margin-top: 20px; padding: 10px 20px; font-size: 16px; }
/* 全屏时可增加样式 */
#module:fullscreen,
#module:-webkit-full-screen {
/* Safari（WebKit）兼容写法 */
width: 100vw; height: 100vh;
font-size: 24px; color: red;
}
</style>
<div id="module">
<h2>我是要全屏的模块</h2>
<p>点击按钮可以全屏显示我。</p>
<button onclick="toggleFullscreen()">全屏/退出全屏</button>
</div>
<script>
const module = document.getElementById('module');
function toggleFullscreen() {
// 页面没有全屏
if (!document.fullscreenElement) {
// 元素进入全屏
module.requestFullscreen().catch(err => {
alert(`无法进入全屏模式: ${err.message}`);
});
} else {
// 退出全屏
document.exitFullscreen();
}
}
function onFullscreenChange(params) {
console.log('params: ', params);
}
// 进入全屏、退出全屏都会触发
module.addEventListener('fullscreenchange', onFullscreenChange)
</script>