HTML5 实现全屏的API（webkitRequestFullscreen）

通常会通过键盘的F11来实现页面的全屏，但是有时候想通过点击页面上某个按钮来实现全屏可以用以下方法：

<div id='box'>全屏</div>

var enterFullscreen = function(el) {
    if (el.requestFullscreen) {
        el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen();
    } else {
        noFullscreenSupport();
    }
};

var exitFullscreen = function() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else {
        noFullscreenSupport();
    }
};

var noFullscreenSupport = function() {
    alert('浏览器不支持该属性.');
};

var fullscreenButton = document.getElementById('box');
fullscreenButton.addEventListener('click', function(e) {
    e.preventDefault();
    if ((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
        exitFullscreen();
    } else {
        enterFullscreen(document.documentElement);
    }
});

var eventList = ["fullscreenchange", "MSFullscreenChange", "mozfullscreenchange", "webkitfullscreenchange"];
for (event of eventList) {
    window.addEventListener(event, function() {
        console.log("666");
    });
}

Chrome浏览器下全屏元素的默认CSS设置，背景色是白色，而body一般是不设置高度或者设置高度为100%，背景色只对可视范围生效。设置全屏状态下的样式和body的样式一致，覆盖掉默认的颜色即可。

F11是整个页面实现全屏，webkitRequestFullscreen 可以指定元素实现全屏。

方法扩展

// 浏览器进入或离开全屏时触发
document.addEventListener('fullscreenchange', function(){});
document.addEventListener('webkitfullscreenchange', function(){});
document.addEventListener('mozfullscreenchange', function(){});
document.addEventListener('MSFullscreenChange', function(){});

// 浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝
document.addEventListener('fullscreenerror', function(){});
document.addEventListener('webkitfullscreenerror', function(){});
document.addEventListener('mozfullscreenerror', function(){});
document.addEventListener('MSFullscreenError', function(){});

参考文档

https://www.cnblogs.com/netgrace/archive/2018/03/10/js-fullscreen.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen