嵌入 iframe 的页面 history 流程（浏览器后退）

Posted 2023-04-26

参考技术A

以下内容仅仅是个人经过测试后的猜测！！如果知道官方的定义的，请再评论区指条明路~

把 iframe 考虑成浏览器新开的 tab 页，是比较合适的~

假设页面上只嵌入了一个 iframe 元素。以下内容顶层网页用 top 表示，嵌入的 iframe 网页用 iframe 表示。

浏览器的后退按钮是面向用户的，既作用整个页面，包含 top 和 iframe 。 top 上的 history 和 iframe 上的 history 的 length 是相同的。 window.history.length === window.top.history.length 。

Chrome 的 history，不仅利用了每一步 top 和 iframe 的状态，还利用了这一步是由那个 window 引起的。点击回退只会使参与了 history 的那个 window 回到上一步该有的状态，点击前进类似。Firefox 跟 Chrome 类似。

在 Safari 上 top 和 iframe 是分开的，然后再根据 history 的形成过程进行组合。
在 Safari 上的结论就相对 Chrome 来说要简单一些，但使用 replace 后整个 history 的逻辑对用户来说可能就难以理解了（如上面例子）。测试中 top 的 page 地址都取至控制台输出 location，有可能与地址栏展示的网址不一致，见下面 存在的问题 。

判断页面是否被嵌入iframe里面

最近在做一个项目，是一个小型的后台管理系统，这个系统可以单独打开，也可以嵌入公司大型的后台管理项目里面
这样就存在一个问题，在被嵌入大的后台管理系统后，不用显示该页面顶部导航栏和左侧的菜单栏
所以我们在项目里面就要做判断，当没有被嵌入iframe里面时，应该正常显示，否则隐藏左侧和顶部

window.self === window.top
//1. 如果返回false –> 说明页面被嵌套在iframe中了 
//2. 如果返回true –> 说明页面并没有被嵌套在iframe中 

上面的代码是判断当前的窗口是不是顶层窗口（判断当前的窗口有没有被嵌套在别的窗口中 ）
如果window.top = window.self 表示没嵌套 当前窗口就是顶层窗口