胖蔡说技术
随便扯扯

JS实现全屏显示和退出全屏功能

开发需求对于某些页面元素较多,或者需要突出显示部分元素避免干扰的组件(主要挂载在HtmlElement元素下)来说,document提供了一个全屏显示的api来方便我们操作。

我们同时也可以通过onresize全局事件用于监听是否进行全屏操作,代码如下:

/**
 * 全屏/退出全屏显示切换开关
 * @param element  当前显示container
 */
export function togglefullScrollFunc() {
  if (!document.fullscreenElement) {
    // 没有fullscreenelement元素,可以进行全屏显示操作, 全屏模式
    document.getElementById('flowable-process-designer')?.requestFullscreen()
  }
  else {
    // 退出全屏模式
    document.exitFullscreen()
  }
}

  window.onresize = ()=> {
      if (document.fullscreenElement) {
        console.log('进入全屏')
        this.rightOffset = '0px'
      } else {
        this.quanPing = false
        this.rightOffset = '-30px'
      }
    }

如上可以通过onresize配合document.fullscreenElement进行监听或者是通过requestFullscreen的回调函数配合记录更新当前状态均可。

赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » JS实现全屏显示和退出全屏功能
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏