window.postmessage到跨域中的嵌套iframe

Question

我有一个根html页面a(比如foo.com上的a.html(，其中包含一个iframe B(比如bar.com上的B.html(

当用户点击父页面A中的某个内容时，我试图通知iframe C。

由于子iframe(B和C(与父iframe A位于不同的域上，因此访问iframe属性或调用脚本不是一种选择。

我可以控制A.html和C.html中的代码，并可以使用html5 postmessaging选项发送消息。我试着从A向B发送邮件，这很好，但直接从A向C发送邮件是我很难做到的。

如果我尝试使用document.parentWindow.frames访问嵌套的iframe C，我只得到iframe B，而没有得到iframeC。这是预期的吗？

如果我首先从DOM中获取iframe B，然后尝试使用getElementByID获取iframeC，我会得到拒绝访问错误，这是显而易见的，因为iframe B在不同的域上，并且不允许查询其DOM。

这是我尝试过的两个选项的代码。。。

选项1

function postMessage1()
{
    var message = new Object;
    message["MessageId"] = "NewPage";
    var messageData = JSON.stringify(message);
    var domain = 'http://localhost';
    var allFrames = document.parentWindow.frames;
    var iframe = allFrames['frameC'];
    iframe.postMessage(messageData, domain); -----> iframe is null here as it cannot find any frame with the ID - frameC.
}

选项2

function postMessage2()
{
    var message = new Object;
    message["MessageId"] = "NewPage";
    var messageData = JSON.stringify(message);
    var domain = 'http://localhost';
    var proxyFrame = document.getElementById("frameB");
    var targetFrame = proxyFrame.getElementById("frameC");  ----> Access denied to getElementByID in frame B as it is from a different domain and accessing its DOM is not allowed.
    targetFrame.contentWindow.postMessage(messageData, domain);
}

我正在尝试使用window.postMessage来寻找是否有解决方案。如有任何帮助，不胜感激。

Answer 1

您需要做的是使用iframe B的frames属性中的引用来访问iframe C。因此，基本上，您递归地访问a的frames特性以获得B，然后访问B的frame特性以获得C:

function postMessage()
{
    var message = new Object;
    message["MessageId"] = "NewPage";
    var messageData = JSON.stringify(message);
    var domain = 'http://localhost';
    var iframeB = document.parentWindow.frames['frameB'];
    var iframeC = iframeB.frames['frameC']; // or iframeB.frames[0]; if C is the only iframe in B
    iframeC.postMessage(messageData, domain);
}

我还没有尝试过上面的代码，但这种通过iframes树的遍历是可能的，因为frames属性不属于同源策略。