当前位置：首页 > news >正文

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

news 来源：原创 2025/5/22 7:22:20

问题描述

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 = 1activeIndex.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"><divv-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"><iframeclass="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的页面，这样应该可以解决打开应用的那一瞬间，由于网页还没有加载造成的白屏频闪现象。