js 实现全屏
全屏 API 的基本使用
现代浏览器提供了 Fullscreen API，允许通过 JavaScript 控制元素进入或退出全屏模式。以下是核心方法：
// 进入全屏（针对特定元素）
element.requestFullscreen();
// 退出全屏
document.exitFullscreen();检测全屏状态变化
通过事件监听可以感知全屏状态的变化：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});浏览器兼容性处理
不同浏览器可能需要前缀：
const element = document.documentElement; // 整个页面
const requestMethod = element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.msRequestFullscreen;
if (requestMethod) {
requestMethod.call(element);
}全屏样式调整
可以为全屏模式添加特定样式：
:fullscreen {
background-color: black;
}
:-webkit-full-screen {
background-color: black;
}实用代码示例
完整的功能实现示例：
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen()
.catch(err => console.error('全屏错误:', err));
} else {
document.exitFullscreen();
}
}
// 添加按钮事件
document.getElementById('fullscreen-btn').addEventListener('click', toggleFullscreen);注意事项
- 全屏请求必须由用户交互（如点击事件）触发
- 部分移动设备可能有特殊限制
- iframe 需要添加
allowfullscreen属性
