如何检查消息（postMessage）来自哪个跨域iframe？

Question

我知道MessageEvent具有source属性，该属性是发送消息的窗口对象。现在，如何让这些信息检查主文档中的iframe（当然还有消息到达的主文档中）是该特定消息的来源？是唯一可用选项来检查location.href窗口对象上的event.source，然后循环所有iframe以检查哪个匹配？如果主文档中存在具有相同源URL的iframe，该怎么办？

Answer 1

如果您尝试读取跨域iframe /窗口的location.href属性，则会抛出异常，因为它违反了同源策略。您可以写到该媒体资源，但不能阅读。即使这样可行，您也会遇到问题，即多个iframe具有相同的URL问题，正如您所猜测的那样。

无论如何，你可以做的是 - 为某种消息发送确认建立协议。换句话说，在收到消息X的iframe中，您将迭代父文档中的所有iframe，并向每个iframe发送消息，询问＆＃34;您是否向我发送了消息X？＆＃34; < / em>你会编程所有的iframe来回答这些问题。当然，您必须将唯一ID附加到所有邮件，以便您知道哪个iframe确认它发送了哪条邮件。

我认为您必须考虑为什么邮件的接收者需要知道发件人是谁，以及为什么仅仅知道对该发件人的引用（event.source）是不够的？如果发件人知道某些信息 - 那么发件人可以首先在邮件中发送此信息。

Answer 2

迭代页面上的所有iframe，并对其window个对象进行身份比较。

window.addEventListener('message', function(e) {
    if(e.origin === 'https://www.example.com') {
        var iframes = document.getElementsByTagName('iframe');

        for(var i = 0; i < iframes.length; i++) {
            if(e.source === iframes[i].contentWindow) {
                // Do stuff with iframes[i]
            }
        }
    }
}

我相信这适用于所有现代浏览器;我很想知道是否有人有问题。

Answer 3

更有效的方法是在启动时为每个iframe传递一个唯一的ID，并在回发到父框架时使用该ID。