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

今天遇到一个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了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。