iframe加载或者切换时候，短暂的白屏频闪问题解决

问题描述

iframe加载或者是切换iframe链接的时候，会有短暂的白屏，这个时候是在加载，目前没有想到避免的问题，应该是浏览器层面的，所以解决方法之一就是，用页面的主题背景色来遮盖一下，当他加载的时候。

这个只是众多方法中的一种

解决

<script setup>
import { ref ,watch} from 'vue'

// tab 配置列表
const tabs = [
  { label: '业务ss', url: 'http://localhost:5173' },
  { label: '状态ss', url: 'http://localhost:5173' },
  { label: 'fdfdfdf', url: 'http://localhost:5173/page15' },
  { label: 'fsdfdfdfd', url: 'http://localhost:5173/page_strategy' },
  { label: 'fsdf管理', url: 'http://localhost:5173' },
  { label: 'fdfdfdf总览', url: 'http://localhost:5173' }
]

const activeIndex = ref(0)

let expanded = true;

function toggleSide() {
  const side = document.getElementById('side');
  const content = document.getElementById('content');
  if (expanded) {
    side.style.width = '2vw'; // 收缩
    content.style.width = '97vw'
  } else {
    side.style.width = '11vw'; // 展开
    content.style.width = '87vw'
  }
  expanded = !expanded;
}

// 点击切换按钮的时候，先遮住，再切换iframe
function switchTab(index) {
  let iframeDom = document.getElementsByClassName('iframe-mask')[0]
  iframeDom.style.opacity = 1
  activeIndex.value = index
}

// 当iframe加载完成后，立马隐藏遮罩层，注意这里不要加动画给opacity 
function onIframeLoad() {
  let iframeDom = document.getElementsByClassName('iframe-mask')[0]
  iframeDom.style.opacity = 0
}



</script>

<template>
  <div>
    <div id="title"></div>
    <div id="middle">
      <div id="side" @click="toggleSide()">
        
      </div>
      <div id="content">
        <!-- 顶部导航栏 -->
        <div class="top-nav">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab"
            :class="{ active: activeIndex === index }"
            @click="switchTab(index)"
          >
            {{ tab.label }}
          </div>
        </div>

        <!-- iframe 区域 -->
        <div class="iframe-wrapper">
          <iframe
            class="iframe-area"
            :src="tabs[activeIndex].url"
            frameborder="0"
            @load="onIframeLoad"
          ></iframe>
          <div class="iframe-mask"></div>
        
        </div>
        
      </div>
    </div>
    <div id="bottom"></div>
  </div>
</template>

<style scoped lang="less">
#title {
  width: 100vw;
  height: 5.6vh;
  background-image: url(../public/images/title.jpg);
}
#middle {
  width: 100vw;
  height: 89vh;
  display: flex;
  

  #side {
    width: 11vw;
    height: 89vh;
    background-image: url(../public//images/side.png);
    background-repeat: no-repeat;
    transition: width 0.3s ease; /* 添加过渡动画 */
    overflow: hidden;
  }

  #content {
    width: 87vw;
    height: 87vh;
    margin-top: 0.8vh;
    margin-left: 0.6vw;
    //background-color: aquamarine;
    
    /* 顶部导航样式 */
    .top-nav {
      height: 3vh;
      display: flex;
      //background-color: #e8f6f4;
      border-bottom: 3px solid #4bb3a4;
      //padding: 6px;
    }

    .tab {
      padding: 1px 16px;
      margin-right: 6px;
      border: 1px solid #48a2a3;
      border-bottom: none;
      background-color: #fff;
      cursor: pointer;
      user-select: none;
      border-radius: 3px 3px 0 0;

      &:hover {
        background-color: #f0fcfb;
      }

      &.active {
        background-color: #5ecbb8;
        color: #fff;
        font-weight: bold;
      }
    }
    // 用到的部分
    .iframe-wrapper {
      position: relative;
      width: 100%;
      height: 84vh;
      background-color: red;

      /* iframe 内容区域 */
      .iframe-area {
        flex: 1;
        width: 100%;
        height: 84vh;
        border: none;
        background-color: #c1eeed;
      }

      .iframe-mask {
        width: 100%;
        height: 84vh;
        position: absolute;
        inset: 0;
        background: #c1eeed; // 遮罩颜色，可换为 loading 图
        z-index: 10;
        pointer-events: none; // 避免遮罩拦截点击
        // 初始先让他是遮住的，这样当第一次加载的时候，不会出现白屏，等加载完成后，再隐藏
        opacity: 1;
      }


    }
    

  }

}

#bottom {
  width: 100vw;
  height: 5vh;
  background-image: url(../public/images/bottom.jpg);
}
</style>

思路

主要就是当第一次打开页面第一次加载iframe的时候，默认有个遮罩层遮住了，当加载完成的时候，遮罩层立即隐藏，当切换链接的时候，切换前先遮住，然后切换，然后加载完成的时候，遮罩层立即隐藏。

---

关于其他应用的一些想法

electron 还有 tauri 这些，可以在外面再封装一层c++或者rust的gui，做一个黑色空白页面，打开之后显示的是c++或者rust的gui,当监听到浏览器或者webview加载完成后，立即隐藏，切换成浏览器或者webview的页面，这样应该可以解决打开应用的那一瞬间，由于网页还没有加载造成的白屏频闪现象。