如果你在web网页开发中,遇到了无法后退/返回的bug,请一定要注意这个bug,你可能遇到了 iframe 的致命缺陷。
问题场景:
在一个网页中嵌入多个 iframe 标签,每个 iframe 内部运行独立的 SPA网页(单页应用),并在多个 iframe 进行了多次前进/后退操作后
然后出现了bug: 网页无法后退返回,或者无法前进
调用 this.$router.back() / this.$router.forward() / history.go(-1)/ window.history.back() 都无法返回之前的页面,无法后退、前进页面。
你可能是 vue js、vue-router 环境下无法返回、无法前进。
这个bug,目前无法解决,对用户体验是个致命缺陷。
无法返回后踢的bug原因:
浏览器内核没有为每个iframe保持独立的 history 历史栈,多个 iframe 的页面前进、后退,导致浏览器顶层的主页面的 history 混乱,导致了各个 iframe 无法稳定的前进后退。
bug的原因与 vue 、vue-router 、react 没什么关系,而是浏览器底层的实现问题。
vue-router 有时候也会导致无法后退返回的bug,一般是 路由的回调钩子函数没有正常调用 done 函数导致的,是能快速修复的。
但是一个网页使用两个 iframe 、多个 iframe 导致的无法返回,是一个比 vue-router 更麻烦的问题。
大量运用 iframe ,请慎重思考 iframe 可能导致无法返回后退的缺点。