使用背景
如果一个页面中内嵌一个子页面,通过<iframe>标签,即可完成页面中嵌套新页面的效果,但是iframe中的子页面如果有跳转页面的新需求,要跳转的新页面会被这个iframe标签的页面框住,从而跳转的页面只显示在了iframe页面中的位置,而不会单独显示一个页签页面。
处理办法
1、在iframe页面中定义要跳转页面到方法。
// 跳页面
const goHref = (obj) =>{
router.replace({
path: obj.path,
query: obj.query
})
}
2、然后子页面只需要调用父页面中页面跳转的方法然后传递页面跳转需要的参数即可,然后完成页面摆脱iframe标签的限制从而实现跳转页面:
if(top.frames && top.frames.length>0){
window.parent.goHref({
path: `/newApplyDetail/${record.id}`,
query: {
id: record.id,
name: record.name,
formUrl: record.formUrl,
}
})
}
总结
相当于子页面跳页面受限于iframe标签页面的限制,通过父页面(iframe页面)帮忙跳转,然后子页面只需要完成父页面的方法调用和参数传递即可!