16

我有一些嵌入代码，用户可以放在他们的网站上。它在页面上创建两个子 iframe。我希望这些孩子能够交流。

我正在使用 javascript 的window.postMessage https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

由于两个 iframe 子级无法直接通信，因此我将父级用作消息的中继。但是，父级可以位于不同的域中，因为它是可嵌入的代码。

当所有三个（父母和两个孩子）都在同一个域上时，这很容易，我可以通过安全检查来检查这e.origin是我自己的网站

# coffeescript
# host = "http://www.mysite.com"
host = "http://localhost"

receive_message = (e) ->
  console.log("received message from " + e.origin + ": " + e.data)
  return if e.origin != host

  if e.data == "show"
    ...
  else if e.data == "hide"
    ...

window.addEventListener("message", receive_message, false)

当父母可以在任何域上时，检查来源的优雅方法是什么？

什么是允许调试源可以是本地主机的脚本的好方法？

如果传递非破坏性/更改消息，仅检查数据参数是否足够？

谢谢！

4

1 回答 1

22

为什么说子iframe不能直接通信？事实上，他们可以。您可以在子 iframe 中执行的操作是使用该window.parent属性获取对父窗口的引用，然后使用父窗口的frames属性获取对所有子 iframe 的引用（该frames属性为您提供此类引用的数组）。之后，您可以postMessage在这些引用中的每一个上使用，并在 postMessage 调用中设置所需的原始限制，这样您就可以确定只有正确的 iframe 才能收到消息。

请注意，即使所有三个窗口（iframe1、父窗口和 iframe2）都在不同的域上，这也会起作用，因为 iframe1 没有对父窗口做任何事情（这会违反 SOP），它只是获取对嵌套 iframe 的引用。

链接：

https://developer.mozilla.org/en-US/docs/DOM/window.parent

https://developer.mozilla.org/en-US/docs/DOM/window.frames

于 2012-12-02T19:46:34.883 回答