typescript vue.js elementui html javascript iframe添加loading效果

问题：当一个页面嵌入iframe时，iframe加载会有延迟。即在iframe元素展现前，嵌入iframe的父页面会有一段白屏情况，用户感知不到iframe页面在加载，体验效果不是很好。

解决方法：为了提升用户体验，让用户感知到当前页面在加载iframe，在iframe加载完成前添加loading效果，替代原有的白屏情况，样式大致如下图，可以参考element ui中的loading效果，Loading组件。

具体代码实现：采用的技术栈是vue3+composition api，iframe中@load事件，在iframe页面加载完成后触发，即如下的handleIframeLoad函数。

ref="iframeRef"

class="iframe-wrap__iframe"

allow="clipboard-read; clipboard-write"

:src="iframeSrc"

@load="handleIframeLoad"

通过isLoading变量变化来控制Loading图标是否展示。初始化定义isLoading变量为true，当iframe加载完成时，将isLoading变量置为false，在页面关闭函数中将isLoading变量再置为true。具体如下：

const isLoading = ref(true);

function handleIframeLoad() {

isLoading.value = false;

}

function close() {

isLoading.value = true;

}

金钥匙