js页面全屏

需求

页面全屏

背景

  在做前端PC端项目中,我们经常会遇到让页面全屏的需求。大多情况下,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。

需求分析

  1. 状态判断
  2. 事件操作

    1. 状态判断

    首先,我们需要给出一个默认状态,即非全屏。然后,在此基础上我们进行DOM操作,每次用户进行操作时,我们先判断当前状态,进行相应的操作,操作过后改变当前状态即可。

    2. 事件操作

    注:下表中de代表document.documentElement
操作 浏览器 代码
全屏 W3C de.requestFullscreen()
全屏 CHROME de.webkitRequestFullScreen()
全屏 FIREFOX de.mozRequestFullScreen()
全屏 IE de.msRequestFullscreen()
还原 W3C document.exitFullscreen
还原 CHROME document.webkitCancelFullScreen
还原 FIREFOX document.mozCancelFullScreen
还原 IE document.msExitFullscreen

代码

注: 本demo在vue中使用。如果使用正常.html,自行将@click转为正常点击事件(如onclick)即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// html
<div @click="handleFullScreen">
一个按钮
</div>

// js
data() {
return {
fullscreen: false // 是否全屏
}
},
methods: {
// 全屏事件
handleFullScreen(){
let element = document.documentElement;
// 判断是否已经是全屏
// 如果是全屏,退出
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
console.log('已还原!');
} else { // 否则,进入全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
console.log('已全屏!');
}
// 改变当前全屏状态
this.fullscreen = !this.fullscreen;
}
}

---本文结束感谢您的阅读---

本文标题:js页面全屏

文章作者:Lomo 朱幸民

发布时间:2019年05月13日 - 14:20:51

最后更新:2019年05月13日 - 16:19:55

原始链接:https://www.zhuxingmin.com/2019/05/13/js页面全屏/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%