javascript postMessage发送回主机

Question

我正在尝试重现facebook的推荐按钮，尤其是出现在主页上的工具提示。

这可能超出了我的能力范围，但我想了解FB是如何做到的。

他们通过"推荐"按钮实现iframe。当你点击时，你会得到一种工具提示(simples-div)，它会覆盖主页面。

我也在尝试这样做，但当然，我不能显示iframe之外的内容！

以下是我的代码示例(hostingdomain.org)：

<script type="text/javascript">
(function() { 
id_marchand = 'daL/RqzZcfqc.'; 
var tyd = document.createElement('script');
tyd.type = 'text/javascript';
tyd.async = true; 
tyd.src = 'http://mydomain.fr/tyd//module/pro_mod.js'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(tyd, s);})
();</script>

这个脚本的目标是读取主页上的一些内容，然后通过postMessage将其发送到iframe:

<iframe src="http://multipress.fr/tyd//module/pro_mod.php"
height="50px" width="150px" 
name="tyd_frame" id="tyd_frame" style="border:1px solid black;" 
onload="start_tyd();"></iframe>

iframe我收到消息内容，然后在上面应用函数。我使用iframe是因为我需要从mydomain.fr读取cookie来执行我的东西。

现在，我想显示一个工具提示(或extradiv)，以向用户确认它已经完成。但我不能让任何东西出现在iframe。。。出于安全考虑，我敢肯定，但Facebook做到了！

因此，我正在研究的解决方案是在iframe中再次使用postMessage将内容发送回pro_mod.js，它可以在主页上工作，但我不知道如何做到这一点。

谢谢你的帮助！

Answer 1

我在那里找到了解决方案：

http://benalman.com/projects/jquery-postmessage-plugin/

这是一个jquery插件，我可以在myiframe中调用它，并允许它向父主机发送消息。

由于我不能在主机中实现jquery，所以我放了一个简单的addeventlistener，然后我就得到了！所以现在我可以在父级中创建"工具提示"div了！

一切都很棒！