gpt4 book ai didi

javascript - 如何使用 postMessage 从嵌套的 iFrame 到根文档进行通信?

转载 作者:行者123 更新时间:2023-11-29 22:13:25 27 4
gpt4 key购买 nike

我正在开发一个插件,它必须使用嵌套的 iframe 来管理相当复杂的页面,如下所示:

page.html
<body>
<iframe A>
<iframe B>
<div bla></div>
</iframe>
</iframe>
<iframe C>
<div foo></div>
</iframe>
</body>

该插件将在多个实例中运行(一个在主页上,一个用于每个 iFrame)。为了通知 iFrame 关于 root 实例,我在生成 iFrame 时将根 URL 作为参数传递,如下所示:

 ...
newHTML = document.createElement("iframe");
newHTML.setAttribute("src", options.src + "?" + priv.encodeURI(rootPath));

因此 iFrame 将使用如下 URL 加载:

 http://www.path/to/iFrame.html?base=...encodeURI(window.location.href.of.root)

我的问题是,我需要从嵌套的 iFrame postMessage 到根,但我无法让它工作。这是我正在做的:

// sending a message
var adressArray = window.location.href.split("?");
options.src = options.src || adressArray[0];
window.postMessage(options, options.src);

// receiving
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
console.log(event.data);
console.log(event.origin);
console.log(window);
}

我的问题是,调用和监听器都在同一个插件中,但应该在插件的不同实例中监听。例如,postmessage 将由 frame B 的实例触发,我的 page.html 实例上的监听器应该检测到该消息。

我以为 targetOrigin属性用于指定 postMessage 应发送到的目的地。相反,我最终发送了我发布的 iFrame (B) 的 URL,它由父 iFrame (A) 记录,而不是 page.html 实例监听它。

问题:
是否可以“跨”两个(或任意数量的) parent 发送 postMessage,而无需人为地将其“冒泡”到树上?假设 iFrame B 的实例想要对 page.html 的实例说“你好”,我将如何使用 postMessage 来做到这一点,当我可以让每个 iFrame 都可以使用“根实例 URL”吗?

谢谢!

问题:

最佳答案

window.top 似乎是我的 friend ,因为它返回最顶层的窗口元素。

当我将消息发送到:

var top = window.top;
top.postMessage("foo", currentFrameUrl);

它工作正常。

不过我会继续传递 URL,因为在跨域 iFrame 上,window.top 肯定不会工作...

关于javascript - 如何使用 postMessage 从嵌套的 iFrame 到根文档进行通信?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16796313/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com