当前位置：首页 > JavaScript

js实现全屏功能

2026-04-07 08:17:34JavaScript

实现全屏功能的JavaScript方法

使用requestFullscreen方法

通过调用元素的requestFullscreen方法实现全屏，兼容现代浏览器：

const element = document.documentElement; // 通常对整个页面全屏
if (element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari兼容
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE兼容
    element.msRequestFullscreen();
}

退出全屏模式

使用document.exitFullscreen方法退出全屏：

js实现全屏功能

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari兼容
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE兼容
    document.msExitFullscreen();
}

检测全屏状态变化

通过监听fullscreenchange事件来响应全屏状态变化：

js实现全屏功能

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE

function handleFullscreenChange() {
    const isFullscreen = document.fullscreenElement || 
                        document.webkitFullscreenElement || 
                        document.msFullscreenElement;
    console.log(isFullscreen ? '进入全屏' : '退出全屏');
}

全屏样式调整

在全屏模式下，CSS伪类:fullscreen可定制样式：

:fullscreen {
    background-color: yellow;
}
:-webkit-full-screen {
    background-color: yellow;
}
:-ms-fullscreen {
    background-color: yellow;
}

按钮触发全屏示例

结合HTML按钮控制全屏：

<button id="fullscreenBtn">切换全屏</button>
<script>
    document.getElementById('fullscreenBtn').addEventListener('click', () => {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    });
</script>