js实现全屏
js实现全屏的方法
在JavaScript中，可以通过Element.requestFullscreen()方法实现全屏功能。现代浏览器普遍支持此API，但不同浏览器可能需要添加前缀。
// 触发全屏
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
}
}退出全屏的方法
使用document.exitFullscreen()可以退出全屏模式，同样需要考虑浏览器兼容性。
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}检测全屏状态
通过document.fullscreenElement可以判断当前是否有元素处于全屏状态。
// 检查是否全屏
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
}全屏事件监听
可以监听fullscreenchange事件来响应全屏状态变化。
// 添加全屏状态变化监听
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
function handleFullscreenChange() {
if (isFullscreen()) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
}样式调整建议
全屏模式下，CSS可以通过:fullscreen伪类为全屏元素添加特殊样式。
:-webkit-full-screen {
background-color: white;
}
:-ms-fullscreen {
background-color: white;
}
:fullscreen {
background-color: white;
}注意事项
某些浏览器要求全屏操作必须由用户手势触发（如点击事件），不能直接通过脚本自动执行。iOS Safari对全屏API的支持有限，可能需要使用特定于WebKit的API。
全屏API通常只能作用于单个元素，常见做法是将整个document.documentElement作为全屏目标。在移动设备上，全屏行为可能与桌面浏览器不同，建议进行真机测试。
