vue 全屏问题 禁止F11

通过按键F11打开的全屏貌似使用脚本无法正确关闭。具体表现是,按键F11会打开全屏,这个时候打印window对象中的window.document,会发现window.document下面的有关全屏的属性并未改变,window.document.fullscreen 的值为 false,此时反复点击切换全屏按钮全屏不会切换。通过screenfull.toggle()方法切换全屏,断点发现确实执行到方法里面了,但是并没有关闭全屏(我猜测F11打开的全屏可能权限更高只能由F11关闭,toggle方法虽然执行了切换全屏并且打印window.document.fullscreen 的值发现也切换true和 false,但是由于权限不足并没有真正关闭F11打开的全屏)。

之后,换一个思路,既然无法操作F11打开的全屏,那就阻止F11的默认行为。在适当时机(我选择在入口组件中)监听按键,如果用户按了F11键(keyCode == 122),则阻止默认行为,去进行我们自定义的操作,比如使用screenfull.toggle()方法切换全屏,这样看上去就像是在正常使用F11。然后是处理按钮点击切换全屏。有了以上的步骤,下面就很简单了。在页面添加按钮,点击按钮切换全屏,具体参照如下步骤:

使用封装好的开源库screenfull处理全屏切换
注:网页全屏有很多兼容性写法,screenfull为我们处理了兼容并且监听了全屏状态,这样我们就不需要再判断是否全屏,直接使用toggle方法就可以切换全屏了。

1.安装screenfull:

npm install screenfull --save

2.进入网页就监听keyDown事件
选择在入口组件 App.vue 中监听按键

import screenfull from "screenfull";//引入screenfull
export default {
  mounted() {
    window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
  },
  methods: {
    toFullscreen() {
      //不支持screenfull全屏,则打印错误
      if (!screenfull.isEnabled) {
        console.error("unEnabled");
        return;
      }
      screenfull.toggle();
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.toFullscreen();
      }
    }
  }
};

3.在按钮页面增加点击事件,并引入screenfull

<span class="full-btn" @click="toFullscreen">切换全屏</span>
import screenfull from "screenfull"; //引入screenfull
...
// 全屏切换方法
toFullscreen() {
    //不支持screenfull全屏,则打印错误
    if (!screenfull.isEnabled) {
        console.error("unEnabled");
        return;
    }
    screenfull.toggle();
}

进入网页按F11键,发现全屏了,这时无论时继续F11按键或者是Esc键或者点击切换全屏按钮都能关闭全屏;进入其他路由按F11键也能却换全屏,看上去并没有禁用F11的功能(实际上是禁用了F11默认行为的)。至此已经完成了整个项目的全屏切换。

Alt

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值