js 实现全屏
实现全屏的基本方法
在JavaScript中，可以通过Element.requestFullscreen()方法实现全屏功能。现代浏览器均支持此API，但不同浏览器可能需要添加前缀。
// 获取需要全屏的元素
const element = document.documentElement; // 整个页面
// 标准方法
if (element.requestFullscreen) {
element.requestFullscreen();
}
// 兼容WebKit浏览器（如Safari）
else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
// 兼容Firefox
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
// 兼容IE/Edge
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}退出全屏的方法
退出全屏使用document.exitFullscreen()，同样需要考虑浏览器兼容性。
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}检测全屏状态
可以通过监听fullscreenchange事件来检测全屏状态的变化。
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
function handleFullscreenChange() {
const isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
console.log(isFullscreen ? '进入全屏' : '退出全屏');
}全屏样式调整
在全屏模式下，CSS可以通过:fullscreen伪类为元素添加特定样式。
:fullscreen {
background-color: yellow;
}
:-webkit-full-screen {
background-color: yellow;
}
:-moz-full-screen {
background-color: yellow;
}
:-ms-fullscreen {
background-color: yellow;
}注意事项
- 全屏API必须在用户交互事件（如点击）中触发，否则会被浏览器阻止。
- 某些浏览器可能限制全屏功能的使用，需遵循浏览器安全策略。
- 移动端浏览器对全屏的支持可能存在差异，建议在实际设备上测试。
以上方法覆盖了主流浏览器的全屏实现方案，可根据实际需求调整代码逻辑。
