js实现全屏显示
使用全屏API实现全屏显示
现代浏览器提供了全屏API，允许以编程方式控制全屏显示。以下是通过JavaScript实现全屏功能的方法：
进入全屏模式
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
}
}
// 示例：使整个文档进入全屏
requestFullscreen(document.documentElement);退出全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}检测全屏状态变化
可以监听全屏状态变化事件：
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); /* Safari */
document.addEventListener('msfullscreenchange', handleFullscreenChange); /* IE */
function handleFullscreenChange() {
if (document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement) {
console.log('Entered fullscreen');
} else {
console.log('Exited fullscreen');
}
}检查当前全屏状态
function isFullscreen() {
return !!(document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement);
}全屏样式调整
在全屏模式下，CSS伪类可以用于调整样式：
:fullscreen {
background-color: yellow;
}
:-webkit-full-screen {
background-color: yellow;
}
:-ms-fullscreen {
background-color: yellow;
}注意事项
- 全屏API必须在用户交互事件（如点击）中触发，不能自动调用
- 不同浏览器可能需要不同的前缀（webkit, ms）
- 全屏请求可能会被浏览器阻止，需要处理可能的拒绝情况
- 移动设备上的全屏行为可能与桌面设备不同
