# # 进入和退出浏览器全屏模式

大多数浏览器都已实现了网页的全屏功能，并提供了快捷键，通常是 F11 和 Esc 键。除了键盘快捷键，W3C 还为全屏定义了两个 API。通过这个 API，我们可以使用 JavaScript 控制网页的全屏显示。

## # 全屏 API

W3C 标准中的方法：

进入全屏：Element.requestFullscreen
(opens new window)

退出全屏： Document.exitFullscreen
(opens new window)

当前全屏模式的元素:Document.fullscreenElement
(opens new window)

然而，在部分版本的浏览器中需要使用的方法却有所不同，参考下表：

功能 | webkit | Gecko(Firefox) | IE11
--- | --- | --- | ---
进入全屏 | webkitRequestFullScreen | mozRequestFullScreen | msRequestFullScreen
退出全屏 | webkitExitFullscreen | mozCancelFullScreen | msExitFullscreen
当前全屏模式的元素 | webkitFullscreenElement or (webkitCurrentFullScreenElement, mobile safari) | mozFullScreenElement | msFullscreenElement

尽管 W3C 制定了全屏 API 的标准，但是在各种浏览器中的支持程度并不好。因此，在使用时有必要进行兼容性处理。

## # 兼容性封装

1. 进入全屏

       function requestFullscreen() {
           const html = document.documentElement;
           const rfs = html.requestFullscreen || html.mozRequestFullScreen || html.webkitRequestFullScreen || html.msRequestFullscreen;
           return rfs.call(html);
       }

2. 退出全屏

       function exitFullscreen() {
           const efs = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
           return efs.call(document);
       }

3. 获取当前全屏的元素

       function getFullscreenElement() {
           return document.fullscreenElement || document.webkitFullscreenElement || document.webkitCurrentFullScreenElement || document.mozFullScreenElement || document.msFullscreenElement;
       }

## # 判断是否全屏

由于 `Document.fullscreen`
(opens new window) 属性已被废弃，根据 MDN 文档，我们可以通过检查 `Document.fullscreenElement` 是否等于 `null` 来判断是否处于全屏模式。

    funcion isFullscreen() {
        return getFullscreenElement() !== null;
    }

然而，从 can i use
(opens new window) 上来看，尽管可以使用不同的前缀获取 `fullscreenElement`，但其兼容性表现仍然不够理想。在对兼容性要求较高的场景中，可以使用 Screen API
(opens new window) 作为辅助手段来判断是否处于全屏模式。

    function isFullscreen() () {
        const fullscreenElement = getFullscreenElement();
        if(fullscreenElement === undefined) {
            return window.innerWidth === screen.availWidth && window.innerHeight === screen.availHeight;
        }
        return fullscreenElement !== null;
    }

## # 事件监听

在进入和退出全屏后， 浏览器会触发 `fullscreenchange`
(opens new window) 事件, 相关的非标准事件还有：

- `webkitfullscreenchange`
- `mozfullscreenchange`
- `MSFullscreenChange`

根据 can I use
(opens new window) 上提供的信息， `fullscreenchange` 事件的兼容性并不是很好。为了提高在各种浏览器和设备上的兼容性，Foxit PDF SDK for Web 提供了 `UIEvents.fullscreenchange`
(opens new window) 事件。

以下示例将使用 PDFUI 库提供的 `addUIEventListener` 函数来监听 `fullscreenchange` 事件：

    pdfui.addUIEventListener(UIExtension.UIEvents.fullscreenchange, isFullscreen => {
        // do something here
    })

请注意，在使用 `UIEvents.fullscreenchange` 事件之前，需要确保在 PDFUI 初始化时加载了`full-screen` addon，或者使用了 AllInOne.js 或 AllInOne.mobile.js。有关更多详细信息，请参阅 Addon 简介 章节.

或者，您可以选择不使用提供的事件，而是使用 `resize` 事件来监听，也可以实现与 `fullscreenchange` 相同的效果。具体方法如下：

    let _isFullscreen = isFullscreen(); // 参考 "判断是否全屏" 小节
    window.addEventListener('resize', () => {
        const currentIsFullscreen = isFullscreen();
        if(currentIsFullscreen !== _isFullscreen) {
            // 到这里表示发生了进入全屏或者退出全屏的变化，也就是对应了 fullscreenchange
        }
        _isFullscreen = currentIsFullscreen;
    })

这两种方法都允许您在浏览器的全屏模式更改时执行某些操作。选择适合您需求和浏览器兼容性要求的方法。