iframe

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

嵌入 iframe 的页面

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

浏览器的后退

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

测试及结论

Chrome 上测试

序号	操作	`top` page	`iframe` page	备注
1	加载页面	11	21
2	iframe 上点击链接修改 iframe	11	22	location.assign 或 pushState
3	iframe 上点击链接修改 iframe	11	23	location.assign 或 pushState
4	top 执行 location.replace 更新 hash	12	23	top 上单页应用更新
5	点击浏览器后退	11	23	步骤 4 替换了步骤 3 产生的历史记录，浏览器认为从步骤 2 到步骤 4 只有 `top` 参与了历史改变，所有只有 `top` 被回退
6	点击浏览器后退	11	21	步骤 2 回退到步骤 1 仅 `iframe` 参与了历史改变，修改 `iframe` page 到步骤 1 时的状态
7	点击浏览器前进	11	22	步骤 1 前进到步骤 2 仅 `iframe` 参与了历史改变，修改 `iframe` page 到步骤 2 时的状态

Chrome 上结论

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

Safari 上测试

序号	操作	`top` page	`iframe` page	备注
1	加载页面	11	21
2	iframe 上点击链接修改 iframe	同步骤 1，11	22	location.assign 或 pushState
3	iframe 上点击链接修改 iframe	同步骤 1，11	23	location.assign 或 pushState
4	top 执行 location.replace 更新 hash	12	23	top 上单页应用更新，将 top 最近的一条历史替换了，现在`步骤 1 2 3`的 `top` 历史是 12 了
5	点击浏览器后退	12	22	步骤 4 替换了步骤 1 `top` 产生的历史记录。此时浏览器后退，`top` 应为 12；`iframe` 由步骤 3 回到步骤 2，应为 22
6	点击浏览器后退	12	21	`top` 和 `iframe` 组合
7	点击浏览器前进	12	22	同上

Safari 上结论

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

存在的问题

Safari 上发现存在 location 和地址栏网址不一致的情况。在上面的测试例子中, 步骤 5 到步骤 7 地址栏显示的还是页面 11 对应的网址，但是控制台打印的 location 确是页面 21 的地址。地址栏的链接应该是分开保存的，上一步是啥就是啥吧，不会被脚本篡改。
发现多次执行 location.replace 后，不会引起 react-router 的 browserHistory.listen，也不会传新的状态给组件。复现步骤（SPA）：1 -> 2 -> 3 -> 执行 replace(2) -> 3 -> 执行 replace(2) 不生效；测试的时候 replace 只修改了 hash。（react-router: "^2.0.0"）

最后编辑于：2017.12.05 21:42:34

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