PC端的网页游戏、漫画阅读等场景经常需要网页全屏显示的功能，实现也很简单，只需调用浏览器提供的全屏 API 即可。

全屏显示

• el.requestFullscreen
• el.webkitRequestFullscreen
• el.msRequestFullscreen
• el.mozRequestFullScreen

注意:
el 是document.element，请求全屏是元素的特性
moz 不只是加前缀，而是非标准写法，最后 Screen 大写

取消全屏

• document.exitFullscreen
• document.webkitExitFullscreen
• document.msExitFullscreen
• document.mozCancelFullScreen

注意: 取消全屏是 document 的特性

兼容性

加上 webkit、ms 前缀和 moz 的非标准写法后，可以看到在 PC 端的支持率达到了 95% 以上。

requestFullscreen 的浏览器兼容性 exitFullscreen 的浏览器兼容性

代码

附上代码：

/**
 * @file 全屏显示
 * @author ***
 */

 export function requestFullScreen(element) {
    var requestMethod = element.requestFullscreen
        || element.webkitRequestFullscreen
        || element.msRequestFullscreen
        || element.mozRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    }
}

export function exitFullScreen() {
    var exitMethod = document.exitFullscreen
        || document.webkitExitFullscreen
        || document.msExitFullscreen
        || document.mozCancelFullScreen ;
    if (exitMethod) {
        exitMethod.call(document);
    }
}

export function checkFullScreen() {
    var isFull = document.fullscreenElement
        || document.webkitFullscreenElement
        || document.msFullscreenElement
        || document.mozFullScreenElement
    return !!isFull
}

注意

网页全屏后，可以通过键盘 esc 键取消全屏，这时通过 keypress 或者 keydown 事件是监听不到的。
如果要在 esc 取消全屏后更改 state，可以监听窗口 resize 事件，配合 checkFullScreen() 和 state 的判断来更新 state。

componentDidMount() {
    // 监听esc退出全屏
    if (window.addEventListener) {
        window.addEventListener('resize', this.onEscCancelFull, false)
    }
    else {
        this.setState({
            originResizeFunc: window.onresize
        })
        window.onresize = this.onEscCancelFull
    }
}

componentWillUnmount() {
    if (window.removeEventListener) {
        window.removeEventListener('resize', this.onEscCancelFull, false)
    }
    else {
        window.onresize = this.state.originResizeFunc
    }
}

onEscCancelFull() {
    if (!checkFullScreen() && this.state.fullScreen) {
        this.setState({
            fullScreen: false
        })
    }
}