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} />