当前位置：首页 > JavaScript

js实现火狐全屏

2026-02-03 04:44:27JavaScript

使用 JavaScript 实现火狐浏览器全屏

在 Firefox 中实现全屏功能可以通过 requestFullscreen API 实现。以下是具体实现方法：

检测全屏支持

在调用全屏功能前，需要检测浏览器是否支持该功能：

js实现火狐全屏

if (document.documentElement.requestFullscreen) {
    // 支持全屏
} else {
    console.log("您的浏览器不支持全屏功能");
}

进入全屏模式

要进入全屏模式，可以调用以下代码：

document.documentElement.requestFullscreen()
    .then(() => {
        console.log("已进入全屏模式");
    })
    .catch(err => {
        console.error("全屏错误:", err);
    });

退出全屏模式

退出全屏模式的代码如下：

js实现火狐全屏

if (document.fullscreenElement) {
    document.exitFullscreen()
        .then(() => {
            console.log("已退出全屏模式");
        })
        .catch(err => {
            console.error("退出全屏错误:", err);
        });
}

监听全屏状态变化

可以监听全屏状态的变化：

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

兼容性处理

对于不同浏览器的前缀问题，可以这样处理：

function toggleFullscreen() {
    const element = document.documentElement;

    if (!document.fullscreenElement) {
        const requestMethod = element.requestFullscreen || 
                             element.mozRequestFullScreen || 
                             element.webkitRequestFullscreen || 
                             element.msRequestFullscreen;

        if (requestMethod) {
            requestMethod.call(element);
        }
    } else {
        const exitMethod = document.exitFullscreen || 
                         document.mozCancelFullScreen || 
                         document.webkitExitFullscreen || 
                         document.msExitFullscreen;

        if (exitMethod) {
            exitMethod.call(document);
        }
    }
}