iframe和浏览器页签切换

判断组件是否被嵌入到iframe中
 

// 引入必要的库
import { onMounted } from 'vue';

export default {
  name: 'YourComponentName',
  setup() {
    // 在组件挂载后检查是否在 iframe 中
    onMounted(() => {
      const isInIframe = window!== window.top;
      if (isInIframe) {
        console.log('Component is being viewed inside an iframe.');
      } else {
        console.log('Component is being viewed in the top-level window.');
      }
    });

    // 其他组件逻辑...
  },
};

判断浏览器页签被切换
 

// 引入必要的库
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'YourComponentName',
  setup() {
    // 定义一个变量来跟踪页签是否被隐藏
    let isTabHidden = false;

    // 监听 visibilitychange 事件
    const handleVisibilityChange = () => {
      isTabHidden = document.hidden;
      console.log('Tab is hidden:', isTabHidden);
      // 在这里你可以根据页签是否被隐藏来执行不同的逻辑
    };

    // 在组件挂载后添加事件监听器
    onMounted(() => {
      document.addEventListener('visibilitychange', handleVisibilityChange);
    });

    // 在组件卸载前移除事件监听器
    onUnmounted(() => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    });

    // 其他组件逻辑...
  },
};

对div或者iframe进行裁剪

#myIframe {
//裁剪掉矩形上方150px
  clip-path: inset(150px 0 0 0);
  width: 100%;
  /* height: 1074px; */
  height: 1224px;
  margin-top: -150px;
  border: none;
}