使用postMessage在两个iframe孩子之间进行通信 [英] communication between two iframe children using postMessage

问题描述

我有一些用户可以放在他们网站上的嵌入代码。它会在页面上创建两个子iframe。我想让这些孩子能够沟通。

我正在使用javascript的 window.postMessage < a href =https://developer.mozilla.org/en-US/docs/DOM/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（收到消息来自+ e.origin +：+ e.data）
返回如果e.origin！= host 
 
 if e.data ==show
 ... 
否则如果e.data ==hide
 ... 
 
 window.addEventListener（message，receive_message ，false）
  

当父级可以在任何域上时，检查原点的优雅方法是什么？

什么是允许调试原点可以是localhost的脚本的好方法？

是吗？足以只检查数据参数是否有传递非破坏性/变化的消息？

谢谢！

解决方案

为什么你说儿童iframe不能直接沟通？实际上，他们可以。你可以在子iframe中使用 window.parent 属性来获取对父窗口的引用，然后使用父的 frames 属性以获取对所有子iframe的引用（ frames 属性为您提供了此类引用的数组）。之后，您可以在每个引用上使用 postMessage ，并在postMessage调用中设置所需的origin restricttoin，这样您就可以确定只有正确的iframe获取消息。 / p>

请注意，即使所有三个窗口（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

I have some embed code that users can put on their sites. It creates two children iframes on the page. I'd like to have those children be able to communicate.

I'm using javascript's window.postMessage https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Since the two iframe children can't communicate directly, I'm using the parent as a relay for messages. However the parent can be on a different domain since it's embeddable code.

When all three (parent and two children) are on the same domain, it's pretty easy and I have this working with the security check checking the e.origin is my own site

# 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)

What is an elegant way to check the origin when the parent can be on any domain?

What is a good way to allow debugging of the script where the origin can be localhost?

Is it sufficient to just check the data param if there are non destructive/changing messages being passed across?

Thanks!

解决方案

Why do you say that the child iframes can't communicate directly? Actually, they can. What you can do within a child iframe is use the window.parent property to get a reference to the parent window, and then use the parent's frames property to get references to all child iframes (the frames property gives you an array of such references). After that, you can use postMessage on each of those references, and set the required origin restrictoin in the postMessage call so that you are sure only the right iframe gets the message.

Notice that this will work even when all three windows (iframe1, parent window and iframe2) are on different domains because iframe1 is not doing anything with the parent window (which would violate SOP), it is only fetching references to nested iframes.

Links:

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

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

这篇关于使用postMessage在两个iframe孩子之间进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！