fullscreenchange全屏事件监听，兼容chrome、safari

最新推荐文章于 2024-01-25 22:13:54 发布

zqian1994

最新推荐文章于 2024-01-25 22:13:54 发布

阅读量1w

点赞数

分类专栏： JavaScript Vue 文章标签： javascript

本文链接：https://blog.csdn.net/zqian1994/article/details/105814522

版权

Vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

本文介绍了一种使用Fullscreen API监听网页全屏状态变化的方法，通过遍历不同浏览器前缀的全屏事件并添加监听器，实现了对全屏状态的统一处理。当全屏状态改变时，将触发回调函数进行相应的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

API参考：Fullscreen API 全屏显示网页

        ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange'].forEach((item,index) => {
          window.addEventListener(item, () => this.fullscreenchange());
        })

   	//  监听全屏事件触发
      fullscreenchange() {
        let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
        if (isFullScreen) {
          //  进入全屏
        } else {
          //  退出全屏
          
        }
      },