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