javascript - 如何访问嵌套的 iframe？

Question

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

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

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

Answer 1

很老的问题，但是，我有一个类似的问题，我想出了一个解决方案。将来可能会帮助其他人。

我们总是postMessage可以iframe使用和iframe.parent.frames[i][j][k]

例如，如果您想将消息发布到 firstiframe内 third 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;
    });
}

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