2

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

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)

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

// 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将由 example 的实例触发，frame B并且我的实例上的侦听器page.html应该检测到该消息。

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

问题：
是否可以“跨”两个（或任意数量的）父母发送 postMessage，而无需人为地将其“冒泡”到树上？假设 iFrame B的实例想对page.htmlpostMessage的实例说“你好” ，当我可以让每个 iFrame 都可以使用“根实例 URL”时，我将如何使用？

谢谢！

问题：

4

1 回答 1

2

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

当我将消息发布到：

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

它工作正常。

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

于 2013-05-28T17:19:10.653 回答