vue3 判断浏览器打开窗口页签变化

原创已于 2024-09-12 19:52:46 修改 · 940 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-09-12 19:26:53 首次发布

场景：当需要同时打开两个页签，需要在切换页签的时候，重新获取数据

根据document.visibilityState结果判断。如果为visible则证明回到当前页签，如果为hidden则证明当前页面未显示（前往了其他页签）

import { onMounted, onUnmounted } from 'vue';

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        // 页面被切换到前台
        console.log('页面被切换到前台');
        // 在这里执行页面回到前台时需要做的事情
      } else if (document.visibilityState === 'hidden') {
        // 页面被切换到后台
        console.log('页面被切换到后台');
        // 在这里执行页面离开时需要做的事情
      }
    };
 
    onMounted(() => {
      document.addEventListener('visibilitychange', handleVisibilityChange);
    });
 
    onUnmounted(() => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    });