zoukankan      html  css  js  c++  java
  • vue中用js判断页面是否全屏

     我当前的项目要求支持IE10/IE11即可,其他浏览器edge、火狐、谷歌要求较新版本都要支持。

    在网上看了许多例子,我的思路:

    (1)使用screenfull来解决全屏操作

    (2)利用监听事件,禁用F11操作的全屏,只有由页面“全屏”按钮才能出发全屏;

    (3)利用监听事件,来改变isFullscreen的值,进而控制页面展示“全屏”图标,还是“退出全屏”图标 

    1、安装使用screenfull.js

    npm install --save screenfull
    

    2、在相应的组件引入screenful,我的js部分的代码如下:

    <script>
    import screenfull from 'screenfull'
    
    export default {
      data() {
        return {
          isFullscreen: false // false非全屏状态、true全屏状态
        }
      },
      created() {
        // 监听事件
        window.addEventListener('resize', this.onresize)
        window.addEventListener('keydown', this.keydown)
      },
      beforeDestroy() {
        // 取消监听事件
        window.removeEventListener('resize', this.onresize)
        window.removeEventListener('keydown', this.keydown)
      },
    
      methods: {
        // 切换是否全屏
        toggleFullscreen(isFscreen) {
          if (!screenfull.enabled) {
            this.$message({
              message: 'you browser can not work',
              type: 'warning'
            })
            return false
          }
          screenfull.toggle()
          this.isFullscreen = isFscreen
        },
    
        // 阻止F11默认事件
        keydown(event) {
          if (event.keyCode === 122) {
            event.preventDefault()
            event.returnValue = false
          }
        },
    
        /**
         * 响应屏幕变化事件,给isFullscreen赋值,标识是否全屏
         * IE中bug: 调试器打开,且与页面不分离时 -- 无效
         * **/
        onresize(event) {
          // 利用屏幕分辨率和window对象的内高度来判断兼容IE
          let winFlag = window.innerHeight === window.screen.height
          // 利用window全屏标识来判断 -- IE无效
          let isFull = window.fullScreen || document.webkitIsFullScreen
    
          if (isFull === undefined) {
            this.isFullscreen = winFlag
          } else {
            this.isFullscreen = winFlag || isFull
          }
          console.log('winFlag || isFull', winFlag, isFull)
        }
      }
    }
    </script>
    

      

      

  • 相关阅读:
    Data Base Oracle 常用命令
    ASP.NET Core ASP.NET Core+MVC搭建及部署
    Hadoop 之 MapReduce 框架演变详解
    计算机网络: IP地址,子网掩码,默认网关,DNS服务器详解
    Linux系统基本网络配置之ifconfig命令
    Linux-eth0 eth0:1 和eth0.1关系、ifconfig以及虚拟IP实现介绍
    Linux 中将用户添加到组的指令
    几种常见的Shell
    常见的Shell
    Linux(CentOS6.5)下创建新用户和组,并制定用户和组ID
  • 原文地址:https://www.cnblogs.com/zkpThink/p/13446615.html
Copyright © 2011-2022 走看看