Question

我有一个根html页面A（比如foo.com上的A.html），它包含一个iframe B（比如bar.com上的B.html）。 iframe B包含另一个iframe C（foobarfoo.com上的C.html）。

我试图在用户点击父页A中的内容时通知iframe C.

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

我可以控制A.html和C.html中的代码，并且可以使用html5 postmessaging选项发送消息。我尝试将postmessage从A发送到B工作正常，但是直接从A发送到C是我正在努力的事情。

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

如果我首先从DOM获取iframe B，然后尝试通过使用getElementByID获取iframe C，我会获得访问被拒绝错误，这很明显，因为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的frames属性得到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);
}

没有尝试过上面的代码，但是这种遍历iframe的树是可能的，因为frames属性不属于相同的原始策略。

window.postmessage到跨域的嵌套iframe

1 个答案: