进去看看，玩一下，本文将结合这个demo一起进行讲解。
codepen
的demo里。
demo
中做的浏览器兼容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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
2
3
4
5
6
7
8
9
10
11
12
|
Fullscreen(domName) {
const element = document.querySelector(domName);
const methodName =
this.prefixName === ''
? 'requestFullscreen'
: `${this.prefixName}RequestFullScreen`;
element[methodName]();
}
|
demo
中有演示,初始化直接全屏，会触发进入全屏失败回调。
demo
中，先进入左边全屏，再进入红色全屏，即为：多层全屏的情况(虽然这种情况并不多)。
当出现多层全屏的情况，需要一层层的退出到页面最初始的情况
，并不是调用一次
document.exitFullscreen()
就恢复到页面最初始的样子。
MDN注意
：此事件不会提供任何信息，表明是进入全屏或退出全屏
。
看了好久事件返回的信息，确实找不到一个值，表明这是在进入全屏，或者离开全屏！
可以说相当不人性化了！但我们可以通过检查当前是否有节点处于全屏状态，判断当前是否处于全屏模式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
screenChange(enter,quit) {
if (!this.isFullscreenData) return;
const methodName = `on${this.prefixName}fullscreenchange`;
document[methodName] = e => {
if (this.isElementFullScreen()) {
enter && enter(e);
} else {
quit && quit(e);
}
};
}
|
注意：多层全屏的情况
先进入左边全屏(进入全屏回调)，再进入红色全屏(进入全屏回调)
退出全屏,此时退出红色全屏，左边仍是全屏(触发进入全屏回调)
出现这种情况，可以在点击按钮的时候，做一些状态限制。或者根据全屏事件返回的dom信息来进行判断。
Fullscreen API：全屏操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.div:-webkit-full-screen {
background: #fff;
}
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
:full-screen {
}
:fullscreen {
}
|
栗子
，把我封装的类拿出来直接用就可以啦！
博客
、
前端积累文档
、
公众号
、
GitHub
以上2018.12.1
参考资料：
Fullscreen API：全屏操作
