美文网首页
iframe切换路径导致页面回退失败

iframe切换路径导致页面回退失败

作者: 一亩三分地啊 | 来源:发表于2022-09-19 17:32 被阅读0次

今天遇到一个bug

页面中嵌入一个iframe,通过顶部tab切换来更改iframe的src路径值,切换看起来很正常。

当我点击右上角返回时,页面却没有返回到上一个页面,而是iframe在局部回退,也就是说点击返回的时候,iframe的src变成了上一次赋值给他的src,而页面却没有回退。

什么原因呢?

原来iframe的src变更时,会往window.history中存入一条历史记录,我们切换iframe的src以后再去回退页面时会回退到那个被误存入的历史记录。

那该怎么解决呢?

很简单,我们只需要在切换src的时候把iframe给销毁再重新创建就行了。这样就是一个新的iframe,不会触发他的变更操作,也就不会往window.history中存入记录。

最简单的方式是:

给iframe加一个key属性,vue中的实现方式是<iframe :src="src" :key="src" />

由于vue中的key更改时会重新渲染这个组件,因此这个方法是可行的。我们直接将src值赋值给key就可以实现切换src时重新渲染iframe了

相关文章

  • iframe切换路径导致页面回退失败

    今天遇到一个bug 页面中嵌入一个iframe,通过顶部tab切换来更改iframe的src路径值,切换看起来很正...

  • 常用的HTML标签

    1. iframe标签 功能:嵌套页面 1.1 a标签和iframe标签一起使用实现嵌套页面间的切换 2. a标签...

  • iframe和table标签

    1、iframe说白了就是页面套页面 2、iframe的缺点:性能低 因为是页面套页面,所以需要加载的页面多,导致...

  • 2018-03-05 HTML元素

    1.