js实现全屏
使用 requestFullscreen 方法
通过调用元素的 requestFullscreen 方法实现全屏。该方法兼容现代浏览器，但不同浏览器可能需要带前缀的版本（如 webkitRequestFullscreen）。
const element = document.documentElement; // 全屏整个页面
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari/Chrome旧版
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen();
}监听全屏状态变化
通过 fullscreenchange 事件监听全屏状态变化，注意不同浏览器的前缀差异。
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari/Chrome旧版
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE/Edge
function handleFullscreenChange() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
}退出全屏
使用 exitFullscreen 方法退出全屏，需注意浏览器兼容性。
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari/Chrome旧版
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}检查当前全屏状态
通过 fullscreenElement 属性判断当前是否有元素处于全屏状态。
const isFullscreen = document.fullscreenElement
|| document.webkitFullscreenElement
|| document.msFullscreenElement;
console.log(isFullscreen ? '全屏中' : '未全屏');全屏按钮示例
结合按钮触发全屏和退出操作，兼容主流浏览器。
<button id="fullscreen-btn">切换全屏</button>
<script>
const btn = document.getElementById('fullscreen-btn');
btn.addEventListener('click', () => {
const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
if (!isFullscreen) {
const element = document.documentElement;
if (element.requestFullscreen) element.requestFullscreen();
else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
}
});
</script>注意事项
- 用户交互触发：大多数浏览器要求全屏操作必须由用户手势（如点击）触发，否则会报错。
- 样式调整：全屏模式下可通过 CSS
:fullscreen伪类自定义样式。 - 移动端兼容性：部分移动端浏览器可能限制全屏功能，需测试目标平台。
通过以上方法可实现完整的全屏功能，覆盖主流浏览器兼容性需求。
