vue3使用iframe引入其他网站,vue-router路由跳转后页面空白,刷新之后才展示页面内容乌龙事件

问题描述:vue3项目的页面A跳转到页面B时,页面B页面是空白的,需要手动刷新一下才能恢复正常,在页面A中用iframe引入了别的网站(后续事实证明,跟iframe没一毛钱的关系)。着急的童鞋可以直接拉到底部看看解决方案,不着急的童鞋可以看看自己的问题和文章中的是不是一样的。

最近做了一个新需求,就是在使用vue3做的项目中,使用iframe引入一个别的网站。这本来也没什么难的,就是新写了一个页面A,在页面A中增加以下代码:

// html (自行在css中给 iframe-container 设置高度)
<template>
  <!--  <div class="container">
          注释的内容
        </div> -->
  <div class="iframe-container">
    <iframe
      :src="data.externalUrl"
      width="100%"
      height="100%"
      frameborder="0"
      target="_top"
    ></iframe>
  </div>
</template>

    // ts(使用了 setup 语法糖), reactive 自行引入即可
const data = reactive({
  externalUrl: 'https://blog.csdn.net/'   // 这里的地址自行替换成自己的
})

这个时候发现在页面A中引入的网站内容正常,但是从页面A跳转到vue3项目的页面B时,页面B页面是空白的,需要手动刷新一下才能恢复正常。发现问题第一时间检查有没有报错,发现没有报错;第二时间去问chatgpt,它给出了3个解决方案,都没能解决问题:
在这里插入图片描述
后来发现把iframe-container注释掉,用原来的container内容也不行了(iframe-container是刚加的,用来测试的),在增加测试代码 iframe-container之前是没问题的。然后就把iframe-container注释也删掉了,发现就正常了…

后来发现问题原因是:在 Vue 模板中,最外层的 标签中第一级不能有注释

对此,chatgpt的解释是(不保真,毕竟chatgpt也有一本正经地胡说八道的时候,参考上图):
在这里插入图片描述
网上没精准地搜出真正的原因,可能是我检索的关键词不对。

所以最终解决办法是:删掉最外层的 标签中第一级的注释,跟 iframe 没有关系。

希望本文对您有所帮助,也请路过的大佬不吝赐教!

猜你喜欢

转载自blog.csdn.net/JaneLittle/article/details/132065332