使用 window.postMessage 方法可以在不同源的窗口（如 iframe 和父页面）之间安全地发送和接收消息。以下是一个简洁的示例，展示了如何在 iframe 和父页面之间使用 postMessage 进行通信。
父页面代码
首先，在父页面中，你需要有一个 iframe，并且设置一个事件监听器来接收来自 iframe 的消息。
html复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parent Page</title> </head> <body> <iframe id="myIframe" src="https://www.wanmait.com/iframe-content.html" width="600" height="400"></iframe>
<script> // 获取 iframe 元素 const iframe = document.getElementById('myIframe');
// 设置事件监听器来接收来自 iframe 的消息 window.addEventListener('message', (event) => { // 出于安全考虑，检查消息的来源 if (event.origin !== 'https://www.wanmait.com') { console.error('Invalid origin:', event.origin); return; }
// 处理来自 iframe 的消息 console.log('Message from iframe:', event.data); // 例如，可以基于消息内容更新父页面的某些部分 // document.getElementById('someElement').innerText = event.data; });
// 父页面也可以向 iframe 发送消息（可选） // iframe.contentWindow.postMessage('Hello from parent!', 'https://www.wanmait.com'); </script> </body> </html>
Iframe 页面代码（example.com/iframe-content.html）
在 iframe 的内容页面中，你可以使用 window.parent.postMessage 方法向父页面发送消息。
html复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Iframe Content</title> </head> <body> <button onclick="sendMessageToParent()">Send Message to Parent</button>
<script> // 定义发送消息到父页面的函数 function sendMessageToParent() { // 发送消息到父页面 window.parent.postMessage('Hello from iframe!', '*'); // 注意：出于安全考虑，不建议使用 '*' 作为目标源，应该使用具体的父页面源 // 例如：window.parent.postMessage('Hello from iframe!', 'https://www.wanmait.com'); }
// 你也可以在这里设置事件监听器来接收来自父页面的消息（可选） window.addEventListener('message', (event) => { // 出于安全考虑，检查消息的来源 if (event.origin !== 'https://www.wanmait.com') { console.error('Invalid origin:', event.origin); return; }
// 处理来自父页面的消息 console.log('Message from parent:', event.data); }); </script> </body> </html>
注意事项
安全性：在接收消息时，始终检查
event.origin以确保消息来自预期的源。在示例中，父页面使用了'https://example.com'，而 iframe 页面则应该使用父页面的实际源。目标源：在发送消息时，尽量避免使用
'*'作为目标源，因为它允许任何源接收消息。相反，应该指定具体的目标源，以确保消息只被预期的接收者接收。数据验证：在接收消息后，验证数据的完整性和正确性，以防止潜在的安全漏洞。
通过遵循这些最佳实践，你可以在不同源的窗口之间安全地使用 window.postMessage 方法进行通信。
0条评论
点击登录参与评论