当前位置：首页 > JavaScript

js实现自动全屏

2026-02-03 03:42:44JavaScript

使用 JavaScript 实现自动全屏

在 JavaScript 中，可以通过 requestFullscreen 方法实现自动全屏功能。以下是具体实现方法：

触发全屏的元素 需要为某个 DOM 元素（如 div 或整个 document.body）调用全屏方法：

const element = document.documentElement; // 通常选择整个页面
if (element.requestFullscreen) {
    element.requestFullscreen();
}

兼容不同浏览器 不同浏览器可能需要添加前缀：

js实现自动全屏

const element = document.documentElement;
if (element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
}

监听全屏状态变化 可以通过事件监听全屏状态的变化：

document.addEventListener('fullscreenchange', () => {
    console.log('全屏状态变化');
});

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

js实现自动全屏

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}

检查当前全屏状态 通过 document.fullscreenElement 检查是否有元素处于全屏状态：

if (document.fullscreenElement) {
    console.log('当前处于全屏模式');
} else {
    console.log('当前未在全屏模式');
}

注意事项

自动全屏通常需要用户交互（如点击事件）触发，否则浏览器可能会阻止。
某些移动设备可能不支持全屏 API。
全屏 API 在不同浏览器中的行为可能略有差异，建议进行兼容性测试。

示例代码

以下是一个完整的示例，通过按钮触发全屏：

<button id="fullscreenButton">切换全屏</button>

<script>
document.getElementById('fullscreenButton').addEventListener('click', () => {
    const element = document.documentElement;
    if (!document.fullscreenElement) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
    }
});
</script>