如何检查消息(postMessage)来自哪个跨域iframe

Question

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

Answer 1

遍历页面上的所有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 2

如果您试图读取跨域iframe/window的location.href属性，这将引发异常，因为它违反了同源策略。您可以向该属性写入，但不能读取。即使这样做有效，您也会遇到多个具有相同URL问题的iframe的问题，正如您所猜测的那样。

不管怎样，你能做的就是为某种消息发送确认建立一个协议。换言之，在接收消息X的iframe中，您将迭代父文档中的所有iframe，并向每个iframe发送一条消息，询问"您是否向我发送了消息X？"，然后您将对所有iframes进行编程以回答这些问题。当然，您必须为所有消息附加唯一的ID，这样您才能知道哪个iframe确认发送了哪个消息。

我认为你必须思考为什么消息的接收者需要知道发送者是谁，为什么仅仅知道发送者的参考（event.source）还不够？如果发件人知道一些信息，那么发件人可以首先在邮件中发送这些信息。

Answer 3

一种更有效的方法是在初始化时为每个iframe传递一个唯一的ID，并使它们在发布回父框架时使用该ID。