js实现页面刷新、全屏、退出全屏

史学娇

已于 2024-06-05 11:07:58 修改

阅读量1.3k

点赞数

分类专栏： react 文章标签：全屏API JavaScript 事件监听 requestFullscreen exitFullscreen

于 2022-07-07 20:42:48 首次发布

本文链接：https://blog.csdn.net/weixin_46151381/article/details/125666724

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

刷新

location.reload()

全屏与退出全屏

api兼容

function fullScreen() {//全屏
      var de = document.documentElement;
      if (de.requestFullscreen) {
          de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
      }
  }

function exitFullscreen() {//退出全屏
   if(document.exitFullscreen) {
       document.exitFullscreen();
   } else if(document.mozCancelFullScreen) {
       document.mozCancelFullScreen();
   } else if(document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
   }
}

全屏切换及监听

// 全屏切换
const toggleFullscreen = () => {
    const element = document.getElementById('treeZone');// 全屏元素
    if (element) {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            element.requestFullscreen().catch((err) => {
                console.log('无法进入全屏模式：', err);
            });
        }
    }
};

onMounted(() => {
    // 由于requestFullscreen是异步操作，确保全屏完成后执行某些操作，可以通过监听fullscreenchange事件
    document.addEventListener('fullscreenchange', (event) => {
        event.stopPropagation(); // 阻止事件冒泡，否则会多次触发
        if (!document.fullscreenElement) {
            console.log('退出全屏');
        } else {
            console.log('全屏');
        }
    });
});