javascript - 在 receiveMessage javascript 中过滤消息

Question

我正在使用 JS 的 postMessage 方法建立跨域通信。嵌入式 iframe 正在发送消息，而父窗口正在接收它。问题是，即使在 receiveMessage 中检查了来源(这大大减少了收到的消息数量)，我仍然收到两条消息，一条是我发布的，另一条是很久以前写的一个不同的目的。所以，我真的不能修改这个其他(不需要的)消息的 postMessage 方法。在 postMessage 方法或 receiveMessage 中有没有一种方法可以帮助识别哪一个是我的？也许我在这里缺少一些额外的参数或配置？

postMessage 代码(在嵌入式 iframe 中):

window.parent.postMessage("Hello world!", "*");

receiveMessage 的代码(在父窗口中):

    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(e) {
      var reliableHost = "://" + "<%= Site.current_site.internal_admin_host %>";
      var secureHost = "https" + reliableHost;
      var notSecureHost = "http" + reliableHost;
      if (e.origin.indexOf(secureHost) != -1 || e.origin.indexOf(notSecureHost) != -1) {
        var data = e.data;
        console.log(data);
        console.log(e.source);
      // filter the other event
      }
    }

Answer 1

由于 data 参数完全在您的控制之下并且可以是一个对象，因此您可以在 data 参数中使用约定来确保您只处理您关心的消息。另请注意 indexOf(...) != -1 可能不太正确，您可能需要 indexOf(...) == 0 (或 startsWith) 而不是，以避免在字符串后面匹配。

所以在收据上(参见 *** 行 [你必须向右滚动 SO 的显示]):

window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
  var reliableHost = "://" + "<%= Site.current_site.internal_admin_host %>";
  var secureHost = "https" + reliableHost;
  var notSecureHost = "http" + reliableHost;
  if ( (e.origin.indexOf(secureHost) == 0 || e.origin.startsWith(notSecureHost) == 0) && // ***
       (e.data && e.data.type === "whatever")                                            // ***
     ) {                                                                                 // ***
    var payload = e.data.payload;                                                        // ***
    console.log(payload);                                                                // ***
    console.log(e.source);
  // filter the other event
  }
}

发送时:

postMessage({type: "whatever", payload: /*...*/});

我总是将此机制与不同的 type 值一起使用，以便与同一整体页面/应用程序进行的不同通信 channel 相互干扰。