全屏实现js

全屏实现方法

使用JavaScript实现全屏功能可以通过Fullscreen API完成，该API允许网页元素以全屏模式显示。以下是几种常见的实现方式。

进入全屏模式

调用requestFullscreen方法可以使特定元素进入全屏模式。以下是一个示例代码：

const element = document.documentElement; // 整个页面
if (element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
}

退出全屏模式

使用exitFullscreen方法可以退出全屏模式：

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
    document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
}

检查全屏状态

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

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

全屏事件监听

可以监听全屏状态变化事件，以便在全屏模式切换时执行特定操作：

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('退出全屏');
    }
}

针对特定元素全屏

可以将全屏功能绑定到按钮或特定元素上：

<button id="fullscreenBtn">切换全屏</button>
<div id="content">需要全屏显示的内容</div>

<script>
    const btn = document.getElementById('fullscreenBtn');
    const content = document.getElementById('content');

    btn.addEventListener('click', () => {
        if (!document.fullscreenElement) {
            content.requestFullscreen().catch(err => {
                console.error('全屏失败:', err);
            });
        } else {
            document.exitFullscreen();
        }
    });
</script>

浏览器兼容性注意事项

不同浏览器对Fullscreen API的实现可能存在差异，因此需要检查并处理兼容性问题。以下是一些常见浏览器的前缀：

• Chrome/Safari/Opera: webkit
• Firefox: 标准API（无前缀）
• IE/Edge: ms

样式调整

在全屏模式下，可以通过CSS调整元素的显示方式。例如，设置全屏背景颜色：

:fullscreen, :-webkit-full-screen, :-ms-fullscreen {
    background-color: #000;
}

通过以上方法，可以实现灵活的全屏功能，并兼容大多数现代浏览器。