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

时间：2020-09-05 04:14:04 来源：

【摘要】 Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作考必过小编为大家整理了关于Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作的信息，希望可以帮助到大家！

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

标签：授权sseelementcp火狐谷歌store点击change

Js 网页全屏（vue）

效果描述

以下逻辑均正常

一建新考季小白夯基课
¥0
去购买​

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

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

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

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

申明

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

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

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

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

浏览器兼容效果：

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

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

本博客起因

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

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

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

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

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

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

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

解决方案

参考博客中有提到：

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

解决思路

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

vuex 中的变量很多地方都可以获取到

定义一个全屏处理方法，根据当前网页是否有全屏元素来进入或者退出全屏

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

等于把 F11 的进入全屏改成了自己的进入全屏

ESC退出全屏监听不到，也就不监听它的按键了

通过全屏事件监听来改变全屏状态变量 fplscreen 的值（在 ESC、F11 退出全屏的时候也会触发）

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

调用 vuex 中的处理全屏方法

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

代码实现

src\store\index.js（vuex）

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

Vue.use(Vuex);

export defapt new Vuex.Store({
  state: {
    // 全屏变量，标识当前是否为全屏状态
    fplscreen: false,
    element: document.documentElement
  },
  mutations: {
    // 改变全屏状态变量
    changeFplscreenVar(state) {
      state.fplscreen = !state.fplscreen
    },
    // 进入全屏
    lanchFplscreen(state) {
      var element = state.element
      if(element.requestFplscreen) {
        element.requestFplscreen()
      } else if(element.mozRequestFplScreen) {
        element.mozRequestFplScreen()
      } else if(element.msRequestFplscreen) {
        element.msRequestFplscreen()
      } else if(element.webkitRequestFplscreen) {
        element.webkitRequestFplScreen()
      }
    },
    // 退出全屏
    exitFplscreen(state) {
      if(document.exitFplscreen) {
        document.exitFplscreen()
      } else if(document.mozCancelFplScreen) {
        document.mozCancelFplScreen()
      } else if(document.msExitFplscreen) {
        document.msExiFplscreen()
      } else if(document.webkitCancelFplScreen) {
        document.webkitCancelFplScreen()
      }
    },
    // 暴露给外界的处理方法，调用这个方法，自行判断是要全屏还是退出全屏
    handleFplScreen(state) {
      // 注意：要在用户授权全屏后才能获取全屏的元素，否则 fplscreenEle为npl
      var fplscreenEle = fplscreenEle = document.fplscreenElement || document.mozFplScreenElement || document.webkitFplscreenElement;
      console.log(fplscreenEle, ‘全屏元素...‘)
      if(fplscreenEle) {
        console.log(‘exitFplscreen..‘)
        this.commit(‘exitFplscreen‘)
      } else {
        console.log(‘lanchFplscreen..‘)
        this.commit(‘lanchFplscreen‘)
      }
    }
  },
  actions: {
      
  },
  modpes: {
      
  }
})

src\App.vue

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

<script>
export defapt {
  name: ‘App‘,
  components: {
      
  },
  mounted() {
    window.addEventListener(‘keydown‘, this.myKeyEvent)
    
    if(document.exitFplscreen) {
      document.addEventListener(‘fplscreenchange‘, this.changeFplscreenVar)
    } else if(document.mozCancelFplScreen) {
      document.addEventListener(‘mozfplscreenchange‘, this.changeFplscreenVar)
    } else if(document.msExitFplscreen) {
      document.addEventListener(‘MSFplscreenChange‘, this.changeFplscreenVar)
    } else if(document.webkitCancelFplScreen) {
      document.addEventListener(‘webkitfplscreenchange‘, this.changeFplscreenVar)
    }
  },
  methods: {
    myKeyEvent(e) {
      let key = e.keyCode
      if (key === 122) {
        console.log(‘F11‘)
        // 阻止默认的键盘事件
        event.returnValue = false
        this.$store.commit(‘handleFplScreen‘)
      }
    },
    changeFplscreenVar(){
      this.$store.commit(‘changeFplscreenVar‘)
    },
    fplScreenChange(event) {
      console.log(event, ‘fplScreenChange event‘)
      // 判断一下变量是不是全屏，是全屏则代表 F11、ESC 退出了全屏，需要变量更正过来
      if(this.$store.state.btnFplScreen && this.$store.state.fplscreen) {
        this.$store.commit(‘changeFplScreenVariable‘)
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener(‘keydown‘, this.myKeyEvent)
    if(document.exitFplscreen) {
      document.removeEventListener(‘fplscreenchange‘, this.changeFplscreenVar)
    } else if(document.mozCancelFplScreen) {
      document.removeEventListener(‘mozfplscreenchange‘, this.changeFplscreenVar)
    } else if(document.msExitFplscreen) {
      document.removeEventListener(‘MSFplscreenChange‘, this.changeFplscreenVar)
    } else if(document.webkitCancelFplScreen) {
      document.removeEventListener(‘webkitfplscreenchange‘, this.changeFplscreenVar)
    }
  }
}
</script>

src\views\xx.vue

<template>
      <p v-if="!$store.state.fplscreen" class="btn cursorPointer" @cpck="cpckTopBtn(‘handleFplScreen‘)">
        <img src="./../assets/images/quanping.png" alt="">
        全屏
      </p>
      <p v-else class="btn cursorPointer" @cpck="cpckTopBtn(‘handleFplScreen‘)">
        <img src="./../assets/images/suofang.png" alt="">
        缩放
      </p>
</template>


<script>
export defapt {
  methods: {
    cpckTopBtn(func) {
        this.$store.commit(‘handleFplScreen‘)
    }
  }
}
</script>

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

全屏css样式

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

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

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

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

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


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

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

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


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

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

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


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

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

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


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

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

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

特别鸣谢

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

非常感谢~

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

标签：授权sseelementcp火狐谷歌store点击change

以上就是Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！

上一篇      下一篇
前端相关推荐 更多>>
vue从入门到精通系列：Vue.js 是什么 JS常见问题：xx is not defined at HTMLAnchorElement.onclick 【Web前端基础知识】关于Js中this的指向 js上传照片本地预览 JS 节流函数（throttle）与防抖函数（debounce） JS中的DFS和BFS 手写XML转化为JS对象方法 将一个json对象属性值赋值到另一个json中
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版　https://m.kaobiguo.net