iframe动态切换src后导致history.back问题

现象

iframe有个奇怪的现象，当我们开发用到iframe嵌套一个网页，动态的改变iframe来实现嵌套网页的切换，这时候会导致history后退变成了iframe后退的问题。这样就会使得点击返回，不是父级页面返回，而是iframe里的页面出现了返回。

解决方法

方案一：对iframe进行销毁

每次动态切换iframe的时候对iframe进行销毁，然后再新建一个iframe。
js直接操作dom，删除对应的iframe，再创建一个新的iframe。
vue使用v-if，react加判断，angular用*ngIf。

方案二：js操作dom，在iframe内操作location，用replace来替换src

const iframe = document.getElementById("iframe");
iframe.contentWindow.location.replace(src);

方案三：使用key

巧用key的特性，在虚拟dom的diff算法中，key有着超高的地位，如果同一类型的虚拟节点的key不相同，就会直接销毁重新挂载，而没有key区分是就会尽可能的复用补丁。

// vue.js
<iframe :key="src" :src="src" />

// react.js
<iframe key={src} sc={src} />