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

在大多数浏览器中都有实现网页全屏功能，并且提供了快捷键，通常是F11和Esc按键。除了按键意外，W3C也制定了两个关于全屏的API。利用这个API，我们可以通过JS控制网页全屏显示。

# 全屏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的标准，但在各浏览器中都没有很好的支持这个标准，因此在使用中还要进行必要的兼容性处理过程。

# 兼容性封装

进入全屏

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

退出全屏

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

获取当前全屏的元素

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;
})