vue 使用全屏插件screenfull.js的用法(解决全屏状态不能监听Esc按键)

开始使用screenfull.js

scss 复制代码
npm install --save screenfull  //下载
javascript 复制代码
import screenfull from 'screenfull' //导入

先来看看如果不使用screenfull.js,要让画面全屏幕的话,程序大概会像这样子

scss 复制代码
document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}

if (document.fullscreenEnabled) {
    requestFullscreen(document.documentElement);
}

我们必须检查目前柳览器是否支持Fullscreen API,并针对不同浏览器调用不同的方法,而当载入screenfull.js,程序就简单多了:

scss 复制代码
if (screenfull.enabled) {
    screenfull.request();
}

只需要使用screenfull.enabled检查是否支持Fullscreen API,然后再使用screenfull.request()调用即可,超简单的啦!

ps:如果不能全屏,去掉if (screenfull.enabled) 这个判断。直接使用 screenfull.request();就行

对某个element使用全屏幕 如果只需要针对画面上的某个element进行全屏幕显示的话,也很简单,在screenfull.request()参数中加入要全屏幕显示的目标就可以了

javascript 复制代码
if (screenfull.enabled) {
  screenfull.request(document.getElementById('image'));
}

取消全屏幕显示 基本上浏览器都支持直接按esc来取消全屏幕,如果希望在程序中取消,只要调用screenfull.exit()即可

scss 复制代码
if (screenfull.enabled) {
  screenfull.exit();
}

解决全屏状态不能监听Esc按键

screenfull.isFullscreen是可以判断是否为全屏状态的

scss 复制代码
screenFull () {
      screenfull.toggle() //切换全屏
      if (screenfull.enabled) {
        screenfull.on('change', () => {
          if(screenfull.isFullscreen){
           //全屏时,要执行的操作
          }else{
            //取消全屏时,要执行的操作
          }
         // console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
        });
      }
    },

ps:如果不能执行操作,去掉if (screenfull.enabled) 这个判断。直接使用 screenfull.on;就行

相关推荐
一只小透明啊啊啊啊2 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友2 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao3 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子3 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...3 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪3 小时前
函数组件和异步组件
前端·javascript·面试
淮北4943 小时前
html + css +js
开发语言·前端·javascript·css·html
麦麦大数据3 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
你的人类朋友3 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei4 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发