标签：授权   sse   element   cli   火狐   谷歌   store   点击   change   

Js 网页全屏（vue）

效果描述

以下逻辑均正常

点击按钮全屏、点击按钮退出全屏、再点击按钮全屏

点击按钮全屏，F11 / ESC 退出全屏，点击按钮全屏

F11 进入全屏，点击按钮退出全屏

不同页面操作全屏，切换全屏均能精准的控制按钮显示的是全屏 / 缩放

申明

• 本 demo 默认状态是全屏（刷新网页也会退出全屏，切换页面不会）

• 只考虑网页全屏，不考虑网页单个元素全屏

  • 项目中有弹窗全屏等，可能会有兼容bug，暂时没有去试验，不知道如何

• 代码里结合了 vuex，安装使用请参考：VueX（Vue状态管理模式)

浏览器兼容效果：

（仅用公司电脑上有的几个浏览器测试了一遍）

• 谷歌浏览器、IE11、Edge火狐、360安全浏览器 均能正常支持本博客的全屏方法以及全屏css

本博客起因

还是想叨叨一下为什么百度这么方便还是会有这么一篇博客，毕竟是恶心过来的

（这个方案是我写了好几个版本才得出的）

• 最主要的还是自己看着 bug不爽

一：全屏API各浏览器支持不同（主要讲的是里面的方法，谷歌浏览器里部分兼容...）

• 我要判断全屏木的办法，一会儿灵一会儿不灵的

二：无法监听 ESC、F11 退出全屏的事件（即使我已经监听了这两个案件事件，在退出全屏的时候，它们依旧不能被监听到）

• 我自己记录的全屏状态被这两个案件搞混乱了

解决方案

参考博客中有提到：

• 注意：要在用户授权全屏后才能获取全屏的元素（但我的浏览器好像没有授权这么个操作，所以不管它）

解决思路

主要在 vuex 中处理全屏状态变量 fullscreen 与真正操作浏览器全屏退出全屏

• vuex 中的变量很多地方都可以获取到
• 定义一个全屏处理方法，根据当前网页是否有全屏元素来进入或者退出全屏

在 app.vue 全局里监听 F11 与全屏改变事件

• 等于把 F11 的进入全屏改成了自己的进入全屏
• ESC退出全屏监听不到，也就不监听它的按键了
• 通过全屏事件监听来改变全屏状态变量 fullscreen 的值（在 ESC、F11 退出全屏的时候也会触发）

在 xx.vue 中给按钮增加全屏、缩放（退出全屏）功能

• 调用 vuex 中的处理全屏方法

（也可以写一个 lib 通用函数，将变量与函数都封装进入，然后在合适的地方调用，全屏事件监听放在什么位置暂时没有想清楚（主要是不同页面切换该如何管理这个监听事件））

代码实现

src\store\index.js（vuex）

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 全屏变量，标识当前是否为全屏状态
    fullscreen: false,
    element: document.documentElement
  },
  mutations: {
    // 改变全屏状态变量
    changeFullscreenVar(state) {
      state.fullscreen = !state.fullscreen
    },
    // 进入全屏
    lanchFullscreen(state) {
      var element = state.element
      if(element.requestFullscreen) {
        element.requestFullscreen()
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen()
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen()
      }
    },
    // 退出全屏
    exitFullscreen(state) {
      if(document.exitFullscreen) {
        document.exitFullscreen()
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if(document.msExitFullscreen) {
        document.msExiFullscreen()
      } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
    },
    // 暴露给外界的处理方法，调用这个方法，自行判断是要全屏还是退出全屏
    handleFullScreen(state) {
      // 注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
      var fullscreenEle = fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
      console.log(fullscreenEle, ‘全屏元素...‘)
      if(fullscreenEle) {
        console.log(‘exitFullscreen..‘)
        this.commit(‘exitFullscreen‘)
      } else {
        console.log(‘lanchFullscreen..‘)
        this.commit(‘lanchFullscreen‘)
      }
    }
  },
  actions: {
      
  },
  modules: {
      
  }
})

src\App.vue

<template>
    <router-view />
</template>

<script>
export default {
  name: ‘App‘,
  components: {
      
  },
  mounted() {
    window.addEventListener(‘keydown‘, this.myKeyEvent)
    
    if(document.exitFullscreen) {
      document.addEventListener(‘fullscreenchange‘, this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.addEventListener(‘mozfullscreenchange‘, this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
      document.addEventListener(‘MSFullscreenChange‘, this.changeFullscreenVar)
    } else if(document.webkitCancelFullScreen) {
      document.addEventListener(‘webkitfullscreenchange‘, this.changeFullscreenVar)
    }
  },
  methods: {
    myKeyEvent(e) {
      let key = e.keyCode
      if (key === 122) {
        console.log(‘F11‘)
        // 阻止默认的键盘事件
        event.returnValue = false
        this.$store.commit(‘handleFullScreen‘)
      }
    },
    changeFullscreenVar(){
      this.$store.commit(‘changeFullscreenVar‘)
    },
    fullScreenChange(event) {
      console.log(event, ‘fullScreenChange event‘)
      // 判断一下变量是不是全屏，是全屏则代表 F11、ESC 退出了全屏，需要变量更正过来
      if(this.$store.state.btnFullScreen && this.$store.state.fullscreen) {
        this.$store.commit(‘changeFullScreenVariable‘)
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener(‘keydown‘, this.myKeyEvent)
    if(document.exitFullscreen) {
      document.removeEventListener(‘fullscreenchange‘, this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.removeEventListener(‘mozfullscreenchange‘, this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
      document.removeEventListener(‘MSFullscreenChange‘, this.changeFullscreenVar)
    } else if(document.webkitCancelFullScreen) {
      document.removeEventListener(‘webkitfullscreenchange‘, this.changeFullscreenVar)
    }
  }
}
</script>

src\views\xx.vue

<template>
      <div v-if="!$store.state.fullscreen" class="btn cursorPointer" @click="clickTopBtn(‘handleFullScreen‘)">
        <img src="./../assets/images/quanping.png" alt="">
        全屏
      </div>
      <div v-else class="btn cursorPointer" @click="clickTopBtn(‘handleFullScreen‘)">
        <img src="./../assets/images/suofang.png" alt="">
        缩放
      </div>
</template>


<script>
export default {
  methods: {
    clickTopBtn(func) {
        this.$store.commit(‘handleFullScreen‘)
    }
  }
}
</script>

<style>
/*重在功能逻辑代码，样式自己写*/
</style>

全屏css样式

/* 多浏览器兼容性写法（亲测有效） */

/* Chrome, Safari, Opera 写法 */
:-webkit-full-screen { }

/* Firefox 写法 */
:-moz-full-screen { }

/* IE/Edge 写法 */
:-ms-fullscreen { }

/* 标准写法 */
:fullscreen { }


/* 也可以通过区分全屏元素 css选择器、浏览器全屏样式 */
#fullscreenEle:fullscreen { }

在全屏状态需要改变样式的地方根据自己的项目写就好了

/* :fullscreen */
:fullscreen #centerInfo,
:fullscreen #rightContent{
  display: none;
}
:fullscreen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
}
:fullscreen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
}


/* :-webkit-full-screen  */
:-webkit-full-screen #centerInfo,
:-webkit-full-screen #rightContent{
  display: none;
}

:-webkit-full-screen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
}

:-webkit-full-screen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
}


/* :-moz-full-screen */
:-moz-full-screen #centerInfo,
:-moz-full-screen #rightContent{
  display: none;
}

:-moz-full-screen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
}

:-moz-full-screen #navMenu{
  width: unset;
  border-radius: 8px;
  left: 10px;
  top: 10px;
}


/* :-ms-fullscreen */
:-ms-fullscreen #centerInfo,
:-ms-fullscreen #rightContent{
  display: none;
}

:-ms-fullscreen .menuItem:not(:nth-last-child(1)) {
  margin-right: 20px;
}

:-ms-fullscreen #navMenu{
  /* IE 不能用 unset，案例中改成 auto 也行 */
  width: auto;
  border-radius: 8px;
  left: 10px;
  top: 10px;
}

特别鸣谢

能得出这套个人看似完美的方案，多亏了这篇博客：HTML5 API详解（1）:fullscreen全屏模式

非常感谢~

Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作

标签：授权   sse   element   cli   火狐   谷歌   store   点击   change   

原文地址：https://www.cnblogs.com/suwanbin/p/13568424.html