今天遇到一个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了
网友评论