js实现网页全屏
使用 JavaScript 实现网页全屏
方法一：使用 Fullscreen API
现代浏览器支持 Fullscreen API，可以通过 JavaScript 控制元素进入或退出全屏模式。
// 进入全屏
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
// 检测全屏状态变化
document.addEventListener('fullscreenchange', () => {
console.log('全屏状态变化:', document.fullscreenElement !== null);
});方法二：通过按钮触发全屏
通常将全屏功能绑定到按钮点击事件上。
<button id="fullscreen-btn">切换全屏</button>
<script>
const btn = document.getElementById('fullscreen-btn');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
enterFullscreen(document.documentElement);
} else {
exitFullscreen();
}
});
</script>方法三：全屏样式调整
全屏模式下可能需要调整 CSS 样式以适应屏幕。
:fullscreen {
background-color: white;
}
:-webkit-full-screen {
background-color: white;
}
:-moz-full-screen {
background-color: white;
}
:-ms-fullscreen {
background-color: white;
}注意事项
- 全屏 API 通常需要用户交互（如点击事件）才能触发，不能自动执行。
- 不同浏览器可能需要前缀（如
webkit、ms）。 - 全屏状态下按
ESC键会退出全屏模式。 - 移动端浏览器对全屏模式的支持可能有限。
