前端js使浏览器窗口全屏与退出----浏览器全屏时 监测通过esc按键退出全屏

vue项目  项目分为顶部导航、侧边导航、以及右边mainContent区域

需求是  让项目的其中一个页面有全屏功能   并且在全屏时隐藏掉顶部的顶导航栏

实现：

1.在state里  定义一个全局flag  根据这个flag来控制顶导航的显示与隐藏

定义在了usr  module里   在store里引入就可以了

2.在页面上的操作

顶导航页面：

<el-header class="header" :style="{'display': (this.$store.state.user.screenFlag ? 'block': 'none')}">

通过定义的全局标志位控制顶导航是否显示
子页面里：
<i class="el-icon-rank" @click="getFullScreen">

子页面里操作：

1. getFullScreen(){
2. //点击操作是否全屏时 对标志位取反
3. this.$store.commit('SET_NUM', !(this.$store.state.user.screenFlag));
4. this.$store.state.user.screenFlag ?
5. this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
6. },
7. inFullCreeen(element){
8. let el = element;
9. let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
10. el.mozRequestFullScreen || el.msRequestFullscreen;
11. // ie下是msRequestFullscreen --- 要注意大小写啊。。
12. if (typeof rfs != "undefined" && rfs) {
13. rfs.call(el);
14. } else if (typeof window.ActiveXObject != "undefined") {
15. let wscript = new ActiveXObject("WScript.Shell");
16. if (wscript != null) {
17. wscript.SendKeys("{F11}");
18. }
19. }
20. },
21. outFullCreeen(element){
22. let el = element;
23. let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
24. el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
25. if (typeof cfs != "undefined" && cfs) {
26. cfs.call(el);
27. } else if (typeof window.ActiveXObject != "undefined") {
28. let wscript = new ActiveXObject("WScript.Shell");
29. if (wscript != null) {
30. wscript.SendKeys("{F11}");
31. }
32. }
33. }

到这里就可以实现通过点击控制浏览器是否全屏了

问题是全屏时按键esc  退出全屏   导航栏不出现

浏览器在全屏时  监测不到esc按键的键盘事件！

解决方法一：

1. created(){
2. let that = this;
3. //webkitfullscreenchange 是h5浏览器监控浏览器是否全屏的api
4. //webkitfullscreenchange -- 谷歌 需考虑其他浏览器内核
5. document.addEventListener('webkitfullscreenchange', function(e){
6. //e.currentTarget.webkitIsFullScreen 可以判断浏览器是否全屏
7. if(!(e.currentTarget.webkitIsFullScreen)){
8.   //浏览器退出全屏时 将标志位置为true来显示顶部导航
9. that.$store.commit('SET_NUM', true);
10. }else{
12. }
13. });
14. document.addEventListener('fullscreenchange', function(e){
15. if(!(e.currentTarget.isFullScreen)){
16. that.$store.commit('SET_NUM', true);
17. }else{
19. }
20. });
21. /!* 火狐 *!/
22. document.addEventListener('mozfullscreenchange', function(e){
23. if(!(e.currentTarget.mozIsFullScreen)){
24. that.$store.commit('SET_NUM', true);
25. }else{
27. }
28. });
29. /!* IE *!/
30. document.addEventListener('MSFullscreenChange', function(e){
31. if(!(e.currentTarget.MSIsFullScreen)){
32. that.$store.commit('SET_NUM', true);
33. }else{
35. }
36. });
37. },

刚开始是通过定义全局点击是否全屏按钮的次数  判断对2取余   来全屏或退出

esc按键时  这个数加乱了  很错乱

另外监测浏览器是否全屏的方法从网上找的

checkFull()  return isFull  那个在我这不管用

解决方法二：

刚知道全屏时样式有伪类。。

那么问题就更简单了  只需要全屏的时候  让导航栏display:none就可以了  

也不用设置全局变量来关联header的行内样式了

只需要在主布局文件里加上如下样式：

:-webkit-full-screen .header {
  display: none!important;
}
:-moz-full-screen .header {
  display: none!important;
}
:-ms-fullscreen .header {
  display: none!important;
}
:fullscreen .header {
  display: none!important;
}

样式参考链接：

全屏时的伪类等等

https://blog.csdn.net/ligaoming_123/article/details/80605748