浏览器全屏代码如何兼容主流浏览器并处理退出全屏事件？

Question

在实现浏览器全屏功能时，如何兼容主流浏览器并监听退出全屏事件是常见的技术问题。不同浏览器对全屏API支持存在差异，如`requestFullscreen`、`msRequestFullscreen`、`mozRequestFullScreen`和`webkitRequestFullscreen`等。此外，退出全屏的事件名称也不统一（`fullscreenchange`、`webkitfullscreenchange`、`mozfullscreenchange`、`MSFullscreenChange`）。因此，需通过检测前缀动态调用对应方法，并统一监听多种退出事件以确保兼容性。同时注意，部分浏览器可能要求全屏操作在用户交互（如点击）中触发，否则会报错或被忽略。如何优雅地封装这些逻辑，使代码简洁且跨平台稳定运行，是开发者需要解决的关键问题。

Answer 1

1. 了解全屏API的基本概念

在实现浏览器全屏功能时，首先需要理解不同浏览器对全屏API的支持差异。主流浏览器如Chrome、Firefox、Edge和Safari都提供了各自的全屏方法：

• requestFullscreen: 标准方法。
• msRequestFullscreen: IE/Edge旧版本。
• mozRequestFullScreen: Firefox。
• webkitRequestFullscreen: Chrome/Safari。

这些方法的调用方式相似，但需要根据浏览器前缀动态选择。例如，以下代码片段展示了如何检测并调用正确的全屏方法：

function toggleFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}
    

2. 监听退出全屏事件

除了进入全屏模式，开发者还需要监听退出全屏的事件。由于浏览器之间的事件名称不统一，必须同时监听多种事件：

浏览器	事件名称
标准	fullscreenchange
WebKit	webkitfullscreenchange
Mozilla	mozfullscreenchange
Microsoft	MSFullscreenChange

可以使用以下代码来统一处理这些事件：

function listenForExitFullscreen(callback) {
    document.addEventListener('fullscreenchange', callback);
    document.addEventListener('webkitfullscreenchange', callback);
    document.addEventListener('mozfullscreenchange', callback);
    document.addEventListener('MSFullscreenChange', callback);
}
    

3. 封装跨平台全屏逻辑

为了使代码更简洁且易于维护，可以将上述逻辑封装为一个工具函数。以下是一个完整的示例：

class FullscreenManager {
    constructor(element) {
        this.element = element;
    }

    toggle() {
        if (!document.fullscreenElement) {
            this.enter();
        } else {
            this.exit();
        }
    }

    enter() {
        const method = ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen', 'msRequestFullscreen']
            .find(m => this.element[m]);
        if (method) this.element[method]();
    }

    exit() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

    listen(callback) {
        ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
            .forEach(event => document.addEventListener(event, callback));
    }
}

// 使用示例
const manager = new FullscreenManager(document.documentElement);
manager.toggle();
manager.listen(() => console.log('全屏状态改变'));
    

4. 用户交互与安全性限制

部分浏览器要求全屏操作必须在用户交互（如点击或键盘事件）中触发，否则会报错或被忽略。以下是确保安全性的流程图：

graph TD;
            A[用户点击按钮] --> B{是否支持全屏};
            B --是--> C[调用全屏方法];
            B --否--> D[提示不支持];
            C --> E{是否成功};
            E --否--> F[捕获错误];
            E --是--> G[监听退出事件];

通过这种方式，可以有效避免因浏览器限制导致的功能失效问题。