如何检测 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 的最佳方法是什么？

Answer 1

两个想法：

您可以通过将消息 source 与 iframe 元素的 contentWindow 属性进行比较（例如，在一个循环）。你想在你所有的目标浏览器上试一试，以确保 event.source === iframe.contentWindow 可以识别 iframe.
您可以 iframe 将其明确包含在消息中。 iframe 的 window 应该可以通过 frameElement 属性访问它嵌入的 iframe 元素，所以理论上，至少对于 same-origin windows、frameElement.id 会给 iframe 那个 ID。

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

得到它

如何检测 JavaScript postMessage 源 iframe 的 ID？

How to detect JavaScript postMessage source iframe's id?

javascript

iframe

event-handling