js如何判断屏幕是否为全屏

在JavaScript中，判断屏幕是否为全屏状态：可以通过检查 document.fullscreenElement、document.mozFullScreenElement、document.webkitFullscreenElement 和 document.msFullscreenElement 这些属性是否存在。如果存在，则表示当前处于全屏模式。使用 document.fullscreenElement、结合事件监听、跨浏览器兼容性 都是确保判断准确的关键。接下来我们将详细介绍如何使用这些方法来判断屏幕是否为全屏状态。

一、基本概念与方法

1、使用 `document.fullscreenElement`

在现代浏览器中，最简便的方法是使用 document.fullscreenElement 属性。当页面进入全屏模式时，这个属性将返回正在全屏显示的元素，否则返回 null。

function isFullScreen() {
    return document.fullscreenElement != null;
}

2、跨浏览器兼容性

由于不同浏览器对全屏API的支持方式略有不同，我们需要考虑到兼容性问题。下面是一个包含了主流浏览器的兼容性代码：

function isFullScreen() {
    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement != null;
}

3、结合事件监听

为了实时检测全屏状态的变化，我们可以监听 fullscreenchange 事件。在全屏状态改变时，浏览器会触发这个事件。

document.addEventListener("fullscreenchange", function() {
    if (isFullScreen()) {
        console.log("The document is now in full screen mode.");
    } else {
        console.log("The document is not in full screen mode.");
    }
});

二、深入解析判断方法

1、`document.fullscreenElement` 的工作原理

document.fullscreenElement 是 HTML5 全屏 API 的一部分。它返回当前处于全屏模式的元素。在进入全屏模式时，浏览器会将这个属性设置为全屏显示的元素，退出全屏模式时则将其重置为 null。

2、跨浏览器兼容性解决方案

由于全屏 API 的早期实现存在差异，我们需要考虑到不同的前缀。以下是各个前缀的详细解释：

标准: document.fullscreenElement
Firefox: document.mozFullScreenElement
Chrome, Safari 和 Opera: document.webkitFullscreenElement
Internet Explorer/Edge: document.msFullscreenElement

3、事件监听的实际应用

通过监听 fullscreenchange 事件，我们可以在全屏状态发生变化时执行特定操作。这在实际应用中非常重要，比如在全屏模式下隐藏某些UI元素，或在退出全屏时恢复它们。

document.addEventListener("fullscreenchange", function() {
    if (isFullScreen()) {
        // 执行进入全屏模式后的操作
    } else {
        // 执行退出全屏模式后的操作
    }
});

三、实际应用场景

1、视频播放器

在视频播放器中，全屏模式是一个常见的功能。通过检测全屏状态，可以在用户进入全屏时调整视频播放器的布局，提供更好的观看体验。

function toggleFullScreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}
document.addEventListener("fullscreenchange", function() {
    if (isFullScreen()) {
        console.log("Entered full screen");
        // 调整视频播放器布局
    } else {
        console.log("Exited full screen");
        // 恢复原始布局
    }
});

2、游戏应用

在基于网页的游戏中，全屏模式可以提供沉浸式体验。通过检测全屏状态，游戏开发者可以在用户进入全屏时隐藏不必要的UI元素，专注于游戏内容。

function toggleGameFullScreen() {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}
document.addEventListener("fullscreenchange", function() {
    if (isFullScreen()) {
        console.log("Game entered full screen");
        // 隐藏游戏外的UI元素
    } else {
        console.log("Game exited full screen");
        // 恢复游戏外的UI元素
    }
});

四、进一步优化与扩展

1、封装全屏切换功能

为了提高代码的复用性和可维护性，我们可以将全屏切换功能封装成一个模块。

const FullScreenHelper = {
    toggleFullScreen: function() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
        }
    },
    isFullScreen: function() {
        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement != null;
    }
};
document.addEventListener("fullscreenchange", function() {
    if (FullScreenHelper.isFullScreen()) {
        console.log("Entered full screen");
    } else {
        console.log("Exited full screen");
    }
});

2、与其他API的结合

全屏 API 可以与其他 Web API 结合使用，提供更丰富的功能。例如，我们可以结合 WebRTC API 实现全屏视频通话，或者结合 Canvas API 实现全屏绘图应用。

// WebRTC 视频通话结合全屏 API
function startVideoCall() {
    // 初始化 WebRTC 连接
    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
        document.querySelector('video').srcObject = stream;
    });
}
function toggleVideoCallFullScreen() {
    if (!document.fullscreenElement) {
        document.querySelector('video').requestFullscreen();
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

五、注意事项与最佳实践

1、用户体验

尽量避免强制用户进入全屏模式，尊重用户的选择。提供一个显眼的按钮或提示，让用户自行决定是否进入全屏模式。

2、错误处理

在请求全屏模式时，可能会遇到用户拒绝或浏览器不支持的情况。应添加适当的错误处理逻辑，确保应用的稳定性。

function requestFullScreen() {
    let elem = document.documentElement;
    if (elem.requestFullscreen) {
        elem.requestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
        });
    }
}

3、跨设备兼容性

不同设备对全屏模式的支持可能存在差异。应在实际项目中进行充分测试，确保在各种设备和浏览器中都能正常工作。

六、总结

判断屏幕是否为全屏状态在现代Web应用中有着广泛的应用场景。通过使用 document.fullscreenElement 和其他浏览器前缀，我们可以准确判断当前的全屏状态，并结合 fullscreenchange 事件实现实时检测。实际应用中，可以将这些方法应用于视频播放器、游戏应用等场景，提升用户体验。最后，封装全屏切换功能、结合其他API使用、处理错误与兼容性问题，都是确保全屏功能稳定可靠的重要实践。