全屏实现js

使用JavaScript实现全屏功能

通过JavaScript可以轻松实现全屏功能，以下是几种常见的方法：

使用requestFullscreen方法

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();
}

退出全屏模式

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

检测全屏状态变化

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

function handleFullscreenChange() {
    if (document.fullscreenElement || 
        document.webkitFullscreenElement || 
        document.msFullscreenElement) {
        console.log('进入全屏模式');
    } else {
        console.log('退出全屏模式');
    }
}

特定元素全屏

const videoElement = document.getElementById('myVideo');
if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
}

全屏API兼容性检查

const fullscreenEnabled = document.fullscreenEnabled || 
                         document.webkitFullscreenEnabled || 
                         document.msFullscreenEnabled;
console.log('全屏功能是否可用:', fullscreenEnabled);

注意事项

• 全屏API通常需要用户交互（如点击事件）才能触发，不能自动调用
• 不同浏览器可能需要不同的前缀（webkit, ms）
• 全屏模式下CSS样式可能需要调整以适应新的显示尺寸
• 移动设备上的全屏行为可能与桌面浏览器不同

浏览器兼容性

现代浏览器基本都支持全屏API，包括：

• Chrome 15+
• Firefox 10+
• Safari 5.1+
• Edge 12+
• Opera 12.1+

对于旧版浏览器，可能需要使用polyfill或替代方案。