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

大多数浏览器都已实现了网页的全屏功能，并提供了快捷键，通常是 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;
})

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