很多人说到 iframe ,都提及 iframe 性能差的问题,这其实只是一个小缺点。
因为,真正你要使用iframe的时候,往往在意的不是性能了,而是:不得不用iframe,既然如此,那就要接受他的存在,该用iframe的时候,还是必须要用的。
在我公司的业务中,使用 iframe 遇到最大的问题是:
一个页面,使用了多个 iframe ,出现了无法后退、无法前进的bug
问题场景:一个应用大全页面,收集了公司大量的应用,all in one 汇集了公司全部的业务系统,每个应用是在一个网页中使用 tab标签页的方式打开。
比如一个web页面中,iframe1 打开了日报系统,iframe2 打开了 财务系统,iframe 3 打开了 邮箱系统,
在页面使用过程中,每个 iframe 随着用户的使用,iframe 中url的变化引起了 iframe 的前进后退,最终:
用户发现,有时候界面无法返回到之前的页面。
复现bug的路径就是,3个iframe都打开,每个iframe 前进几个页面,再随机换到别的 iframe 中,发现 iframe 的 history.back() / history.go(-1) 无法后退页面,无法返回到之前的界面,点击后退没反应……
这种bug,目前无法解决,对用户体验是个致命缺陷。
如果开发中,遇到 vue 、vue-router 无法返回、无法前进,可能就是遇到了这个 iframe 无法返回的bug。
如果遇到 this.$router.back() / this.$router.forward() / window.history.back() 执行了,后退或者前进完全没反应,你可能就是一个页面多个 iframe ,几个iframe 都有页面的前进后退,浏览器的 history 历史栈出问题了,就导致了无法前进、后退。
无法返回、前进的出现的必要条件
- 一个网页使用了多个iframe框架
- 多个 iframe 都有页面的前进后退(大于等于两个iframe)
满足这些条件,就会出现前进、后退出bug。
一个页面,只有一个iframe是不会遇到无法前进、后退的bug的。
对iframe的使用,开发者还是需要慎重考虑。