关于在vue2中嵌入iframe时判断是否加载完成的问题

又写了一天BUG

已于 2024-07-28 14:33:41 修改

阅读量1.1k

点赞数 13

文章标签：前端服务器

于 2024-07-28 12:01:42 首次发布

本文链接：https://blog.csdn.net/I_Allen_Liu/article/details/140748859

版权

在vue2项目中嵌入iframe时，会出现iframe加载慢，屏幕短暂白屏的情况。

为了避免出现此类情况，我们可以监听iframe的加载情况进行判断。

 <iframe
        ref="ifra"
        allowTransparency="true"
        scrolling="no"
        :src="src"
        style="
          border: 0px none;
          width: 193%;
          height: 90vh;
          margin-top: 6vh;
        "
      >

mounted() {
    const frame = this.$refs.ifra
    frame.addEventListener('load',()=>{
      console.log('iframe加载完了');
      this.$emit('iframeLoaded',true)
    })
  },