摘要：推荐这么做，因为如果每个都要这样重复的判断浏览器前缀，那也太恶心了浏览器是否支持全屏模式属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。
我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播 放的那种。感觉很强，前几个星期有个需求也是关于全屏模式的，接触之后才知道全屏模式并不神秘，是个很容易掌握的技能...
博客、前端积累文档、公众号、GitHubCodePen Demo
地址：演示、code
进去看看，玩一下，本文将结合这个demo一起进行讲解。
全屏功能封装在一个类里面：我把全屏模式封装在一个类里面，在代码中有详细的注释，如果有需要的话，直接把类拿出来，根据栗子和注释使用即可。
代码在codepen的demo里。
何谓全屏？MDN介绍：
使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。
chrome下的全屏表现：
全屏会隐藏标签栏,书签栏
如果网页一开始不是全部撑开的形式，全屏下，也会将要全屏的元素充满整个屏幕
可以多层全屏，如栗子中一样，可以先左边全屏，然后红色全屏。
在这种情况下退出全屏，只会退出红色全屏，退回到左边全屏的形式，所以页面依然是全屏模式。
进入全屏时，有一个默认的提示："按esc即可退出全屏模式"，如下图显示：
当按Esc或调用退出全屏方法，退出全屏。标签栏和书签栏依然是隐藏的，网页上的元素恢复成原本的尺寸。
要显示书签栏和标签栏，需要刷新一下页面。
全屏API：总共用到6个API：
浏览器是否支持全屏模式：document.fullscreenEnabled
使元素进入全屏模式：Element.requestFullscreen()
退出全屏：document.exitFullscreen()
检查当前是否有节点处于全屏状态：document.fullscreenElement
进入全屏/离开全屏，触发事件：document.fullscreenchange
无法进入全屏时触发: document.fullscreenerror
浏览器前缀：目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:
这是我在demo中做的浏览器兼容：
/**
* @description: 是否支持全屏+判断浏览器前缀
* @param {Function} fn 不支持全屏的回调函数 这里设了一个默认值
*/
isFullscreen(fn) {
let fullscreenEnabled;
// 判断浏览器前缀
if (document.fullscreenEnabled) {
fullscreenEnabled = document.fullscreenEnabled;
} else if (document.webkitFullscreenEnabled) {
fullscreenEnabled = document.webkitFullscreenEnabled;
this.prefixName = "webkit";
} else if (document.mozFullScreenEnabled) {
fullscreenEnabled = document.mozFullScreenEnabled;
this.prefixName = "moz";
} else if (document.msFullscreenEnabled) {
fullscreenEnabled = document.msFullscreenEnabled;
this.prefixName = "ms";
}
if (!fullscreenEnabled) {
if (fn !== undefined) fn(); // 执行不支持全屏的回调
this.isFullscreenData = false;
}
}
我在实例化的时候进行一次判断浏览器是否支持全屏，然后保存浏览器前缀。
推荐这么做，因为如果每个API都要这样重复的判断浏览器前缀，那也太恶心了！
1. 浏览器是否支持全屏模式：document.fullscreenEnableddocument.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。
代码在上方浏览器前缀代码中给出了。
如果没有保存浏览器前缀的话，注意做一下不同浏览器前缀的兼容！下面不再强调。
2. 使元素进入全屏模式：Element.requestFullscreen()/**
* @description: 将传进来的元素全屏
* @param {String} domName 要全屏的dom名称
*/
Fullscreen(domName) {
const element = document.querySelector(domName); // 获取dom
const methodName =
this.prefixName === ""
? "requestFullscreen"
: `${this.prefixName}RequestFullScreen`; // API前缀
element[methodName](); // 调用全屏
}
这就是我们实现全屏的API，是不是超简单？
值得注意的是：调用此API并不能保证元素一定能够进入全屏模式
MDN：例如