在网页开发中，iframe 就像一个个嵌套的“小窗口”，为我们展示来自不同源的网页内容。但如何让这些“小窗口”与主页面进行沟通呢？今天，就来揭秘 iframe 父子页面通信的技巧，让你的网页交互更上一层楼！

跨越“次元壁垒”：iframe 通信挑战

由于浏览器的同源策略限制，来自不同源的 iframe 页面之间无法直接访问彼此的数据和方法。想要实现通信，我们需要借助一些技巧来跨越这道“次元壁垒”。

实战演练：三种常用通信方法

1.postMessage大法：跨域通信的利器

• parent.postMessage(message, targetOrigin) ：父页面发送消息。message : 要发送的消息内容。targetOrigin : 接收消息的窗口的源，用于安全校验。
• window.addEventListener('message', handler) ：子页面监听消息。
• 父页面 (index.html)：

   <iframe src="child.html" id="myIframe"></iframe>
   <script>
       const iframe = document.getElementById('myIframe');
       const message = { type: 'greeting', content: 'Hello from parent!' };

       iframe.onload = () => {
           iframe.contentWindow.postMessage(message, 'http://localhost:5173'); // 假设子页面地址
       };
   </script>

子页面 (child.html)：

   <script>
       window.addEventListener('message', (event) => {
           if (event.origin !== 'http://localhost:8080') return; //  安全校验，确保消息来自预期源
           console.log(event.data); //  输出：{ type: 'greeting', content: 'Hello from parent!' }
       });
   </script>

2. 操作 iframe DOM：简单直接，但有限制

• 父页面访问子页面DOM: iframe.contentWindow.document
• 子页面访问父页面DOM: window.parent.document
• 限制： 仅适用于同源页面。

3.window.name：古老但有效

• 利用 iframe 的 name 属性传递消息。
• 优点： 简单，可跨域。
• 缺点： 传递信息量有限。

源码解析：postMessage 背后的秘密

postMessage 方法是 HTML5 新增的跨文档消息传递机制，它允许不同源的窗口之间进行安全通信。

• 当父页面调用 postMessage 发送消息时，浏览器会将消息包装成一个 MessageEvent 对象，发送给子页面。
• 子页面通过监听 message 事件，可以接收到该消息。
• MessageEvent 对象包含以下属性：data : 消息内容。origin ：发送消息的窗口的源。source ：发送消息的窗口对象。

总结

iframe 父子页面通信是网页开发中的常见需求，掌握 postMessage 、DOM操作 和 window.name 三种方法，能够帮助你轻松应对各种通信场景，打造更流畅的网页交互体验！