福昕开发者文档中心

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

概述 ​

浏览器全屏模式是一种常用的查看方式，可以让用户专注于内容的浏览。大多数浏览器都已实现了网页的全屏功能，并提供了快捷键，通常是 F11 和 Esc 键。除了键盘快捷键，W3C 还为全屏定义了标准 API。通过这个 API，我们可以使用 JavaScript 控制网页的全屏显示。

全屏 API ​

W3C 标准中的方法：

进入全屏：Element.requestFullscreen

退出全屏：Document.exitFullscreen

当前全屏模式的元素：Document.fullscreenElement

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

功能webkitGecko(Firefox)IE11
进入全屏webkitRequestFullScreenmozRequestFullScreenmsRequestFullScreen
退出全屏webkitExitFullscreenmozCancelFullScreenmsExitFullscreen
当前全屏模式的元素webkitFullscreenElement or (webkitCurrentFullScreenElement, mobile safari)mozFullScreenElementmsFullscreenElement

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

兼容性封装 ​

进入全屏 ​

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

退出全屏 ​

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

获取当前全屏的元素 ​

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

判断是否全屏 ​

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

javascript
function isFullscreen() {
    return getFullscreenElement() !== null;
}

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

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

事件监听 ​

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

  • webkitfullscreenchange
  • mozfullscreenchange
  • MSFullscreenChange

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

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

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

TIP

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

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

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

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