兼容Mac和window上不同浏览器的全屏操作

博客内容讲述了在处理浏览器兼容性问题时,遇到的Mac上Safari浏览器无法退出全屏的问题。作者通过检查不同浏览器的全屏API并结合ActiveXObject,找到了一个适用于Chrome和Safari的解决方案,实现了全屏模式的切换功能。
摘要由CSDN通过智能技术生成

最近同事提了一个兼容性的bug,没问题啊,但是我用的是chrome浏览器,而同事是用的safari浏览器,name问题就来了,mac上没法进行退出全屏操作,于是找了很多资料,最终得到这个亲测的正确方法~

toggleFullScreen () {
      console.log(888)
      var isFullscreen = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      if (isFullscreen) {
        var efs = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
        console.log(efs)
        if (efs) {
          efs.call(document);
        } else if (window.ActiveXObject) {
          var ws = new ActiveXObject('WScript.Shell');
          ws && ws.SendKeys('{F11}');
        }
      } else {
        var el = document.documentElement;
        var rfs = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
        console.log(rfs)
        if (rfs) {
          rfs.call(el);
        } else if (window.ActiveXObject) {
          var ws = new ActiveXObject('WScript.Shell');
          ws && ws.SendKeys('{F11}');
        }
      }
      this.fullScreen = !this.fullScreen
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值