iframe 跨窗口通信指南

掌握 iframe 与父页面的通信技术，包括 postMessage、MessageChannel 等高级通信方案

postMessage 通信

使用 postMessage 实现安全的跨域通信：

支持跨源通信的标准方案
可传输结构化数据
内置源验证机制
支持双向通信

基础使用示例:

// 父窗口发送消息
const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage({
    type: 'INIT',
    data: { config: 'some config' }
  }, 'https://trusted-child.com');
});

// iframe 接收消息
window.addEventListener('message', (event) => {
  // 始终验证消息来源
  if (event.origin !== 'https://parent-site.com') {
    return;
  }

  const { type, data } = event.data;
  switch (type) {
    case 'INIT':
      handleInit(data);
      break;
    // 处理其他消息类型...
  }
});

// iframe 回复消息
window.parent.postMessage({
  type: 'READY',
  data: { status: 'initialized' }
}, 'https://parent-site.com');

MessageChannel 通信

使用 MessageChannel 建立专用通信通道：

创建双向点对点通信
隔离不同通信上下文
支持传输复杂数据类型
适合多窗口通信场景

MessageChannel 示例:

// 创建通信管理器
class IframeChannelManager {
  constructor() {
    this.channel = new MessageChannel();
    this.handlers = new Map();
  }

  connect(iframe) {
    iframe.addEventListener('load', () => {
      // 传递 MessagePort 到 iframe
      iframe.contentWindow.postMessage('CONNECT_CHANNEL', '*', 
        [this.channel.port1]);
      
      // 设置 port2 的消息处理
      this.channel.port2.onmessage = this.handleMessage.bind(this);
    });
  }

  handleMessage(event) {
    const { type, data } = event.data;
    const handler = this.handlers.get(type);
    if (handler) {
      handler(data);
    }
  }

  on(type, handler) {
    this.handlers.set(type, handler);
  }

  send(type, data) {
    this.channel.port2.postMessage({ type, data });
  }
}

// 使用示例
const manager = new IframeChannelManager();
const iframe = document.querySelector('iframe');

manager.connect(iframe);
manager.on('READY', (data) => {
  console.log('Iframe ready:', data);
});

// iframe 内部代码
window.addEventListener('message', (event) => {
  if (event.data === 'CONNECT_CHANNEL') {
    const port = event.ports[0];
    
    port.onmessage = (e) => {
      const { type, data } = e.data;
      // 处理消息...
    };

    port.postMessage({
      type: 'READY',
      data: { status: 'connected' }
    });
  }
});

通信协议设计

设计可靠的通信协议：

定义标准的消息格式
实现错误处理机制
支持消息确认和重试
处理并发和竞态条件

协议实现示例:

// 消息协议实现
class MessageProtocol {
  constructor() {
    this.messageQueue = new Map();
    this.timeout = 5000;
    this.retries = 3;
  }

  createMessage(type, data) {
    return {
      id: crypto.randomUUID(),
      type,
      data,
      timestamp: Date.now()
    };
  }

  async sendWithRetry(port, message) {
    let attempts = 0;
    
    while (attempts < this.retries) {
      try {
        const response = await this.sendWithTimeout(port, message);
        return response;
      } catch (error) {
        attempts++;
        if (attempts === this.retries) {
          throw new Error(`消息发送失败: ${message.id}`);
        }
        // 指数退避重试
        await new Promise(resolve => 
          setTimeout(resolve, Math.pow(2, attempts) * 1000)
        );
      }
    }
  }

  sendWithTimeout(port, message) {
    return new Promise((resolve, reject) => {
      const timeoutId = setTimeout(() => {
        this.messageQueue.delete(message.id);
        reject(new Error('消息超时'));
      }, this.timeout);

      this.messageQueue.set(message.id, {
        resolve,
        reject,
        timeoutId
      });

      port.postMessage(message);
    });
  }

  handleResponse(messageId, response) {
    const pending = this.messageQueue.get(messageId);
    if (pending) {
      clearTimeout(pending.timeoutId);
      this.messageQueue.delete(messageId);
      pending.resolve(response);
    }
  }
}

安全通信实践

确保通信安全的关键措施：

严格的源验证机制
消息加密和签名
防止 XSS 和注入攻击
限制消息大小和频率
实现超时和错误处理

安全提示： 在处理敏感数据时，确保使用加密通信，并始终验证消息来源。定期审查通信安全策略并更新安全措施。

调试与故障排除

通信问题诊断和调试：

使用开发者工具监控通信
实现日志记录系统
处理常见错误场景
性能监控和优化

调试工具示例:

// 通信调试工具
const debugTools = {
  enableDebug: true,
  
  log(type, data) {
    if (!this.enableDebug) return;
    
    console.log(`[IframeComm] [${type}]:`, {
      timestamp: new Date().toISOString(),
      data
    });
  },
  
  error(type, error) {
    console.error(`[IframeComm] [${type}] Error:`, {
      message: error.message,
      stack: error.stack,
      timestamp: new Date().toISOString()
    });
  },
  
  monitor(port) {
    if (!this.enableDebug) return;
    
    let messageCount = 0;
    const start = Date.now();
    
    return new Proxy(port, {
      get(target, prop) {
        if (prop === 'postMessage') {
          return function(...args) {
            messageCount++;
            debugTools.log('MESSAGE_SENT', {
              count: messageCount,
              elapsed: Date.now() - start,
              payload: args[0]
            });
            return target.postMessage.apply(target, args);
          }
        }
        return target[prop];
      }
    });
  }
};