PostMessage 项目运用

我在项目的圈选平台搭建的时候,用到了,PostMessage 案例

api 参数 postMessage(message, targetOrigin, transfer) message 作为传递的信息 targetOrigin 用于目标源地址,你要往哪个源去发送信息.

  circleMark = new CircleMark({ postMsgOpts: 
  [{ targetWindow: window.parent, targetOrigin: '*' }], 
  appName: options?.appName });
class CircleMark {
    options: Options;
    isItemSelected: boolean = false;
    topic!: TOPIC | null;
    actions!: { topic: TOPIC, status: string, function: Function }[];

    constructor (options: Options) {
        this.options = options;
        this.initActions();
        this.postMessageToMainWindow({ topic: 'circleMarkApp', data: { appName: this.options.appName } });
        this.addMessageListener();
    }

    postMessageToMainWindow(message: any) {
        const { postMsgOpts } = this.options;
        postMsgOpts.forEach((opt) => {
            const { targetWindow, targetOrigin } = opt;
            targetWindow.postMessage(message, targetOrigin);
        });
    }

验证源 event.orgin ,返回的是真实的发送过来的源地址,可以校验是否是如期的,避免异常

window.addEventListener('message', function(event) {
  if (event.origin === 'testOrgin') {
    try {
      var messageData = JSON.parse(event.data);
      // 处理验证后的消息数据
    } catch (e) {
      console.error('Invalid message data format');
    }
  }
}, false);

其实除了iframe 多标签也数据通信 webworker 主子线程通信 等其实都是可以运用的,本质上就是遇到跨域通信,可以想到用PostMessage