[前端][fmui]iframe内部页面发生跳转导致的返回上一页存在问题

问题现象:

iframe内部发生跳转页面后返回不了上一级问题: [知识库地址1](问题信息表详情页面 (epoint.com.cn)open in new window)

tab页嵌套iframe列表页,列表页跳转详情页后切换tab导致要返回多次问题: [知识库地址2](问题信息表详情页面 (epoint.com.cn)open in new window)

问题原因:

  1. iframe独立历史记录栈:每个iframe维护自己独立的历史记录栈,与父页面的历史记录栈分离
  2. 历史记录管理混乱
    • 当iframe内部发生页面跳转时,只更新iframe自身的历史记录
    • 父页面的历史记录未同步更新
    • 导致浏览器返回操作作用域不明确
  3. 多层级导航冲突:在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
 }, '*');
最后更新时间::
贡献者: wyanqd