[前端][fmui]iframe内部页面发生跳转导致的返回上一页存在问题
问题现象:
iframe内部发生跳转页面后返回不了上一级问题: [知识库地址1](问题信息表详情页面 (epoint.com.cn))
tab页嵌套iframe列表页,列表页跳转详情页后切换tab导致要返回多次问题: [知识库地址2](问题信息表详情页面 (epoint.com.cn))
问题原因:
- iframe独立历史记录栈:每个iframe维护自己独立的历史记录栈,与父页面的历史记录栈分离
- 历史记录管理混乱:
- 当iframe内部发生页面跳转时,只更新iframe自身的历史记录
- 父页面的历史记录未同步更新
- 导致浏览器返回操作作用域不明确
- 多层级导航冲突:在tab页嵌套iframe的场景下,存在多个层级的历史记录栈(浏览器主页面、tab容器、iframe),返回操作难以正确识别目标层级
解决方案:
改为不在iframe内部进行跳转详情页,冒泡到父页面进行跳转,iframe历史记录就不会增加,也就不会导致需要返回多次问题
父子页面同源情况:
直接使用父页面window跳转
// 原代码(在iframe内部执行)
epointm.openPage(url);
// 修改后
window.top.epointm.openPage(url);
// 原代码
ejs.page.open(url);
// 修改后
window.top.ejs.page.open(url);
父子页面跨域情况:
// 父页面中的代码
window.addEventListener('message', function(event) {
if (event.data.type === 'CHANGE_URL') {
ejs.page.open(event.data.url);
}
});
// 三方页面向父页面发送消息
window.parent.postMessage({
type: 'CHANGE_URL',
url: url
}, '*');