javascript - postMessage 源 IFrame

Question

我正在开发一个具有跨域 iframe 的网站，这些 iframe 使用 postMessage 调整到正确的高度。我遇到的唯一问题是确定哪个 iframe 具有哪个高度。我目前设置它的方式是，当一个 iframe 将其高度发送给父级时，所有 iframe 的高度都会改变。

家长:

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
    $('iframe').height(e.data);
}, false);

内嵌框架:

var updateHeight = function() {
    if(window.parent) {
        window.parent.postMessage($('.widget').outerHeight(), '*');
    }
};

有什么方法可以识别哪个 iframe 发送了 message 事件？

Answer 1

是的，您可以识别执行 postMessage 的 IFRAME。有不同的情况:

• 源 IFRAME 与接收消息的窗口具有同源 URL(例如 http://example.com/):IFRAME使用

  识别

  myIFRAME.contentWindow == event.source

• 源 IFRAME 有一个同源但相对的 URL(例如 /myApp/myPage.html)到父 HTML 页面:IFRAME 被识别使用

  myIFRAME.contentWindow == event.source.parent

• 源 IFRAME 的跨源 URL(例如 http://example.com/)不同于接收消息的页面(例如http://example.org/):以上方法都不起作用(比较总是false并且访问event.source的属性导致 Access Denied 错误)并且 IFRAME 必须根据其来源域进行识别；

  myIFRAME.src.indexOf(event.origin)==0

为了管理这三种不同的情况，我使用了以下内容:

var sourceFrame = null; // this is the IFRAME which send the postMessage
var myFrames = document.getElementsByTagName("IFRAME");
var eventSource = event.source; // event is the event raised by the postMessage
var eventOrigin = event.origin; // origin domain, e.g. http://example.com

// detect the source for IFRAMEs with same-origin URL
for (var i=0; i<myFrames.length; i++) {
    var f = myFrames[i];
    if (f.contentWindow==eventSource || // for absolute URLs
        f.contentWindow==eventSource.parent) { // for relative URLs
        sourceFrame = f;
        break;
    }
}

// detect the source for IFRAMEs with cross-origin URL (because accessing/comparing event.source properties is not allowed for cross-origin URL)
if (sourceFrame==null) {
    for (var i=0; i<myFrames.length; i++) {
        if (myFrames[i].src.indexOf(eventOrigin)==0) {
            sourceFrame = myFrames[i];
            break;
        }
    }
}

对于跨域 URL，请注意，如果 event.origin 是多个 IFRAME 的公共(public)域，我们无法区分真正的来源。

有些人使用 === 而不是 == 但我在这方面没有发现任何区别，所以我使用了最短的比较器。

此实现已经过测试并可在以下环境下运行:

• MSIE 9
• 火狐 17

作为替代方案(由 Griffin 建议)，您可以使用具有唯一标识符(例如时间戳)的 IFRAME src，并且 IFRAME 的 Web 应用程序将在发布的消息中发回此唯一标识符。虽然 IFRAME 识别会更简单，但这种方法需要修改 IFRAME 的 Web 应用程序(这并不总是可行的)。这也可能导致安全问题(例如，IFRAME 的网络应用程序试图猜测其他 IFRAMEs 应用程序的唯一标识符)。