如何用window.postMessage()实现跨源页面的iframe嵌入？

首先明确：window.postMessage() 不能解决跨域iframe的加载问题——它的作用是在已经成功加载的跨域页面之间进行数据通信，和iframe能否被嵌入完全是两回事。

你的iframe无法加载，核心原因是目标页面（https://example.com/page2/）的服务器设置了安全限制，阻止了跨域嵌入，常见的限制方式有两种：

• X-Frame-Options响应头：比如设置为DENY或SAMEORIGIN，禁止非同源页面嵌入
• Content-Security-Policy (CSP) 的frame-ancestors指令：限制允许嵌入该页面的域名范围

解决方法分两种情况： #

1. 你有权限修改目标页面的服务器配置

直接调整安全响应头，允许你的子域名嵌入：

• 若用X-Frame-Options：设置为 X-Frame-Options: allow-from https://subdomain.example.com（注意：部分现代浏览器更推荐CSP方式）
• 若用CSP：添加 Content-Security-Policy: frame-ancestors https://subdomain.example.com;，明确允许你的子域名作为嵌入父页面

2. 你没有目标页面的修改权限

这种情况下没有办法绕过限制直接嵌入——这是目标网站主动设置的安全防护，window.postMessage()对此完全无能为力，它只能在iframe成功加载后做跨域通信，没法突破嵌入限制。

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