js实现火狐全屏
使用 JavaScript 实现火狐浏览器全屏
在 Firefox 中实现全屏功能可以通过 requestFullscreen API 实现。以下是具体实现方法：
检测全屏支持
在调用全屏功能前，需要检测浏览器是否支持该功能：
if (document.documentElement.requestFullscreen) {
// 支持全屏
} else {
console.log("您的浏览器不支持全屏功能");
}进入全屏模式
要进入全屏模式，可以调用以下代码：
document.documentElement.requestFullscreen()
.then(() => {
console.log("已进入全屏模式");
})
.catch(err => {
console.error("全屏错误:", err);
});退出全屏模式
退出全屏模式的代码如下：
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);
}
}
}注意事项
- 全屏API必须在用户手势事件（如点击）中触发，不能自动执行
- Firefox需要
mozRequestFullScreen前缀（注意大小写） - 全屏请求可能会被浏览器阻止，需要处理Promise的reject情况
以上代码在最新版Firefox中测试通过，实现了全屏功能的进入、退出和状态监听。
