Question

我正在开发一个插件，它必须管理具有嵌套iframes的相当复杂的页面，如下所示：

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

该插件将在多个实例中运行（主页上有一个，每个iFrame一个）。要通知iFrames有关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)

我的问题是，我需要postMessage从嵌套的iFrame到root，我无法让它工作。这就是我正在做的事情：

// 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 ）的网址，该网址由父级iFrame（ A ）而非page.html实例监听它。

问题：
是否有可能在两个（或任意数量）父母之间发送一个postMessage，而没有明确地将它“冒泡”到树上？假设iFrame的实例 B 想要对 page.html 的实例说“Hello”，我怎么能使用postMessage来做每个iFrame都可以使用“根实例URL”吗？

谢谢！

问题：

Answer 1

window.top似乎是我的朋友，因为它返回了最顶层的窗口元素。

当我将postMessage发送到：

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

它正常工作。

我会继续传递这个网址，因为在跨域iFrame上，window.top肯定无法正常工作......

如何使用postMessage从嵌套的iFrames到根文档进行通信？

1 个答案: