js实现自动全屏

使用 requestFullscreen 方法

在 JavaScript 中，可以通过调用 requestFullscreen 方法实现自动全屏。该方法适用于大多数现代浏览器，但不同浏览器可能需要前缀。

const element = document.documentElement; // 全屏整个页面
if (element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
    element.msRequestFullscreen();
}

监听全屏状态变化

可以监听全屏状态的变化，以便在全屏模式改变时执行特定操作。

document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log('进入全屏模式');
    } else {
        console.log('退出全屏模式');
    }
});

检查全屏权限

某些浏览器可能会阻止自动全屏，需要用户交互（如点击事件）才能触发全屏。可以通过以下方式检查是否允许全屏。

document.addEventListener('click', () => {
    const element = document.documentElement;
    if (element.requestFullscreen) {
        element.requestFullscreen().catch(err => {
            console.error('全屏请求失败:', err);
        });
    }
});

退出全屏模式

可以通过 exitFullscreen 方法退出全屏模式。

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

全屏特定元素

可以指定某个元素（如视频或 div）进入全屏模式。

const videoElement = document.getElementById('video');
if (videoElement.requestFullscreen) {
    videoElement.requestFullscreen();
} else if (videoElement.webkitRequestFullscreen) {
    videoElement.webkitRequestFullscreen();
}

兼容性处理

为了确保代码在多种浏览器中正常工作，建议使用以下兼容性检查。

function toggleFullscreen(element) {
    if (!document.fullscreenElement) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}