让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效）

  • Z时代
  • 2024-02-26
  • 分类：IT

需求要实现某个组件全屏，代码如下

// 全屏
    toggleScreenfull () {
      const ele = document.getElementById(this.cardId)// 设置后就是   id==con_lf_top_div 的容器全屏
      if (this.fullscreen) {
        const exitFunc = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen
        exitFunc.call(document)
      } else {
        // const func = ele.requestFullscreen || ele.mozRequestFullScreen || ele.webkitRequestFullscreen || ele.msRequestFullscreen
        // func.call(ele)
        try {
          if (ele.requestFullscreen) {
            ele.requestFullscreen()
          } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen()
          } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen()
          } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen()
          }
        } catch (e) {
          console.log('全屏异常---')
          console.log(e)
        }
      }
    },

让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效）
全屏理想情况：
让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效）
全屏异常情况（效果看起来像整个页面全屏，同时页面无法操作，如：输入框、按钮都失效）：
让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效）
请问哪位大神有什么解决方案吗？

看网上说该api的流程是：
①调用这个元素对象的 requestFullscreen()方法；
②浏览器将元素全屏显示，改变相关的属性值，然后触发 document 的 fullscreenchange事件；
③退出全屏时有两种方式，一种是默认的按 ESC键退出，一种是调用 document的 exitFullscreen() 方法；
④浏览器将元素退出全屏显示，改变相关属性值，再次触发 fullscreenchange
方法。

猜想是不是②最后触发 document 的 fullscreenchange事件时出错了

回答：

只是下拉失效还是所有的？如果下拉失效的话可能是下拉内容不在全屏节点下导致不显示。如果是连点击按钮都没反应，就不太清楚了。得查看是否进入点击事件

回答：

我也遇到了这样的情况 请问解决方案是什么 谢谢你 也是进入全屏后 无法点击其他事件 目前 不知道是什么情况

以上是 让某个元素全屏，出现异常，变成整个页面全屏同时页面无法操作（如输入框、按钮都失效） 的全部内容， 来源链接： utcz.com/p/937026.html

回到顶部