可通过五种方案实现 iframe 页面跳出重定向：一、window.top.location.href（同源）；二、window.parent.location.href（浅层同源）；三、window.open+self.close（跨域模拟）；四、X-Frame-Options或CSP响应头禁止嵌入；五、postMessage跨域通信由父页跳转。
如果您在 iframe 中加载的页面需要跳出当前框架，直接在父窗口中进行重定向，则可能是由于 iframe 的同源策略限制或目标页面未主动脱离嵌套环境。以下是实现跳出 iframe 并完成页面重定向的多种方案：
一、使用 window.top.location.href 跳转
该方法通过访问顶层窗口的 location 属性，强制将整个浏览器窗口重定向至新地址。适用于同源 iframe 场景，且父页面未设置 sandbox 属性或 allow-top-navigation 权限。
1、在 iframe 内嵌页面的 JavaScript 中添加如下代码：
2、window.top.location.href = "https://example.com";
立即学习“前端免费学习笔记（深入）”；
3、若需防止被其他站点嵌入后执行跳转，可先判断是否处于 iframe 中：
4、if (window.top !== window.self) { window.top.location.href = "https://example.com"; }
二、使用 window.parent.location.href 替代跳转
当目标是仅替换父级 frame 而非顶层窗口时，可使用 parent 对象。此方式适用于嵌套层级较浅、且父页面与当前页面同源的情形。
1、在 iframe 页面中插入脚本：
2、window.parent.location.href = "https://example.com";
3、注意：若父页面设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'，该操作将被浏览器阻止。
三、使用 window.open 与 self.close 组合
该方案通过打开新窗口并关闭当前 iframe 所在页面来模拟“跳出”效果，适用于跨域 iframe 且无法修改父页面的情况。
1、执行新窗口打开操作：
2、window.open("https://example.com", "_blank");
3、随后尝试关闭当前页面（部分浏览器可能拦截）：
4、window.self.close();
5、为提升兼容性，可在调用前添加用户交互检测：
6、document.body.addEventListener('click', () => { window.open(...); window.self.close(); });
四、服务端响应头控制跳转行为
在服务器返回 HTML 前，注入 HTTP 响应头以禁止页面被嵌入，从而迫使客户端在独立标签页中打开，间接实现跳出效果。
1、配置 Web 服务器返回以下响应头之一：
2、X-Frame-Options: DENY
3、或使用更现代的策略：
4、Content-Security-Policy: frame-ancestors 'none'
5、此时若用户通过 iframe 访问该页面，浏览器将直接拒绝渲染，并可能显示空白或错误提示，引导用户手动访问目标地址。
五、使用 postMessage 进行跨域通信触发跳转
当 iframe 与父页面跨域但双方均可配合开发时，可通过 postMessage 发送指令，由父页面执行 location 跳转，规避同源限制。
1、iframe 页面中发送消息：
2、window.parent.postMessage({ action: "redirect", url: "https://example.com" }, "*");
3、父页面监听消息并执行跳转：
4、window.addEventListener("message", (e) => { if (e.data.action === "redirect") { window.location.href = e.data.url; } });
5、为增强安全性，应在接收端校验 e.origin 是否为可信来源。
