嵌套Iframe中如何从内层Iframe直接链接跳转至外层Iframe

你的嵌套结构里Iframe-2的直接父窗口就是Iframe-1，不需要经过最顶层窗口，根据是否跨域分以下几种实现方式：

1. 静态链接无JS实现 #

如果是普通的点击链接跳转需求，不需要写JavaScript，直接利用a标签的原生target属性即可：

<!-- 代码写在Iframe-2的页面中 -->
<a href="你要跳转的Iframe-1目标地址" target="_parent">触发跳转</a>

注意：target="_parent"只会让链接在当前iframe的直接父容器（也就是你的Iframe-1）中打开，只有target="_top"才会跳转到最顶层窗口，不要混淆属性。

2. 同域场景JS实现 #

如果Iframe-1和Iframe-2部署在同一个源（协议、域名、端口完全一致），没有跨域限制，可以直接通过window.parent拿到Iframe-1的window实例操作，不需要经过顶层窗口：

• 整页跳转场景

// 代码写在Iframe-2的触发逻辑中
// window.parent 就是Iframe-1的window对象，不要用window.top
window.parent.location.href = 'Iframe-1要跳转的目标地址'

• 局部更新/触发自定义逻辑场景
  如果不需要整页刷新，只是要触发Iframe-1内部的路由跳转、内容更新，可以直接调用Iframe-1上挂载的全局方法、操作DOM：

// 调用Iframe-1中提前定义的全局方法
window.parent.triggerJump({ path: '/target-page', id: 123 })
// 直接操作Iframe-1的DOM更新内容
window.parent.document.querySelector('#content-box').textContent = '更新后的内容'

3. 跨域场景JS实现 #

如果Iframe-1和Iframe-2不同源，受浏览器同源策略限制不能直接操作父窗口属性，用postMessage做定向通信即可，通信链路只在Iframe-2和Iframe-1之间，不涉及顶层窗口：

1. 先在Iframe-1的业务代码中添加消息监听：

// 代码写在Iframe-1中
window.addEventListener('message', (event) => {
  // 务必做来源校验，避免恶意页面发送伪造消息
  if (event.origin !== '部署Iframe-2的源地址') return
  // 识别来自Iframe-2的跳转请求
  if (event.data?.type === 'IFRAME2_JUMP') {
    // 执行对应跳转逻辑，单页应用可以用自己的路由实例跳转
    window.location.href = event.data.targetUrl
  }
})

2. 在Iframe-2需要触发跳转的位置，向直接父窗口发送消息：

// 代码写在Iframe-2的触发逻辑中
const iframe1Window = window.parent
iframe1Window.postMessage({
  type: 'IFRAME2_JUMP',
  targetUrl: 'Iframe-1要跳转的目标地址',
  // 可携带其他自定义业务参数
}, '部署Iframe-1的源地址') // 生产环境请填写精确源，不要用通配符*

核心逻辑提示：所有方案都只用到window.parent指向直接父容器的特性，全程不需要访问window.top（最顶层窗口），完全满足你不回退顶层、不重新手动触发打开Iframe-1的要求。

内容的提问来源于stack exchange，提问作者Overstack