如何访问嵌套的 iframe？

Question

我需要将帖子消息 ( window.postmessage ) 发送到 iframe。
如果我在父页面中有单个 iframe，目前它正在工作。但我想让它适用于嵌套的 iframe。
标准是：

• 我可以在最后一个叶 iframe 中添加侦听器代码。
• 不知道 iframe 嵌套的长度。
• 需要双向通信，从父母到孩子也通过叶 iframe 到父母。

我厌倦了第三方 iframe，请给我一些合适的解决方案。

Answer 1

很老的问题，但是，我遇到了类似的问题，并且找到了解决方案。 它可能会在将来帮助其他人。

我们总是可以使用.parent和.frames[i][j][k]在两个方向上postMessage嵌套iframe中的任何iframe

例如，如果您想将消息发布到第三个iframe中的第一个iframe ，您可以这样做：

window.frames[2][0].postMessage(msg, "*");

在https://javascript.info/cross-window-communication上查看更多信息

对于 iframe，我们可以使用以下方法访问父/子窗口：

• window.frames——嵌套窗口对象的集合，
• window.parent, window.top 是对父窗口和顶层窗口的引用，
• iframe.contentWindow 是标签内的窗口。

postMessage 接口允许窗口相互交谈，无论它们来自哪个来源。 所以，这是绕过“同源”政策的一种方式。 在此处查看更多信息。

Answer 2

您可以实现自己向上或向下传播事件的事件系统。

在您的所有 iframe 中添加类似的内容将向下传播事件。

//create a jquery object to use the bind/trigger event system
var vent = $({});

function trigger(event, args) {
    //trigger for the current iframe
    vent.trigger(event, args);

    //propagate down for all nested iframes
    $.each(getAllIframes(), function(i, iframe) {
        iframe.trigger(event, args);
    });
}

function bind(event, callback) {
    vent.bind(event, callback);
}

function getAllIframes() {
    return $("iframe").map(function(){
      return this.contentWindow;
    });
}

您可以以类似的方式实现事件冒泡，但必须具有某种绑定到所有子框架的初始化逻辑。