当前位置：首页 > JavaScript

js实现全屏显示

2026-01-30 11:14:20JavaScript

实现全屏显示的方法

在JavaScript中，可以通过Fullscreen API来实现全屏显示功能。以下是几种常见的实现方式：

1. 使用requestFullscreen方法

js实现全屏显示

// 获取需要全屏的元素
const element = document.documentElement; // 整个页面
// const element = document.getElementById('myElement'); // 特定元素

// 进入全屏
if (element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
}

2. 退出全屏

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
}

3. 检查当前全屏状态

js实现全屏显示

const isFullscreen = document.fullscreenElement 
    || document.webkitFullscreenElement 
    || document.msFullscreenElement;
console.log(isFullscreen ? '全屏中' : '非全屏');

4. 切换全屏状态

function toggleFullscreen() {
    const elem = document.documentElement;
    if (!document.fullscreenElement) {
        elem.requestFullscreen().catch(err => {
            console.error(`全屏错误: ${err.message}`);
        });
    } else {
        document.exitFullscreen();
    }
}

5. 全屏事件监听

document.addEventListener('fullscreenchange', () => {
    console.log('全屏状态变化');
});
document.addEventListener('webkitfullscreenchange', () => { /* Safari */ });
document.addEventListener('msfullscreenchange', () => { /* IE */ });

注意事项

全屏API必须由用户交互（如点击事件）触发，不能自动调用。
不同浏览器可能需要前缀（如webkit, ms）。
移动设备上的支持可能有限，需测试目标平台。

兼容性处理示例

function launchFullscreen(element) {
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) { /* Chrome, Safari, Opera */
        element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
    }
}

以上方法可以满足大多数全屏显示需求，建议在实际使用时添加错误处理逻辑。