ZDecodeJavascript
Iframe通信
iframe 主流使用 Window.postMessage 实现通信。
父页面 => iframe
- 父页面发送消息给 iframe：
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('hello iframe', "http://example.org:8080");- 子页面接收父页面消息：
window.addEventListener('message', (event) => {
if (event.origin !== "http://example.org:8080") return;
console.log('接收到来自父页面的消息:', event.data);
});info
如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
iframe => 父页面
- 子页面发送消息给父页面：
window.parent.postMessage('hello parent', "http://example.org:8080/child");- 父页面接收消息：
window.addEventListener('message', (event) => {
if (event.origin !== "http://example.org:8080/child") return;
console.log('接收到来自子页面的消息:', event.data);
});