javascript - 如何检测 JavaScript postMessage 源 iframe 的 id？

Question

我有这个代码：

<iframe src="..." id="iframe_01"></iframe>
<iframe src="..." id="iframe_02"></iframe>

const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
const eventer = window[eventMethod];
const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';

eventer(messageEvent, (e) => {
  console.log(e);
  // ...
});

检测消息发件人 iframe 的最佳方法是id什么？

标签： javascriptiframeevent-handling

Answer 1

两个想法：

1. 您可以通过将消息source与元素的contentWindow属性iframe（例如，在循环中）进行比较来获得它。您需要在所有目标浏览器上尝试此操作，以确保event.source === iframe.contentWindow可以识别iframe.

2. 您可以将其iframe明确包含在消息中。的iframe窗口应该可以iframe通过该属性访问它嵌入的元素，frameElement因此理论上，至少对于同源窗口而言，它frameElement.id会给出该iframeID。

如果这些都不起作用，您可以使用postMessage来告诉iframes 要发回什么 ID，或者将 ID 包含在iframeURL 的查询字符串中，以便iframe从location.search.