内容脚本中的 IFrame。如何与 main.js 通信？答案

【问题标题】：IFrame in content script. How to communicate with main.js?内容脚本中的 IFrame。如何与 main.js 通信？
【发布时间】：2013-06-07 06:27:14
【问题描述】：

我的 Firefox 插件从内容脚本（page-mod）打开 Fancybox（类型：“iframe”）。在 Fancybox 中，我展示了我自己的 HTML 页面 (my_fancybox_stuff.html)，该页面位于我自己的服务器中。

现在，我可以从my_fancybox_stuff.js（my_fancybox_stuff.html 的javascript）向插件的main.js 发送消息吗？还是打开 Fancybox 的内容脚本？

我希望可以从 my_fancybox_stuff.js 访问全局“self”对象，因为它可以从打开 Fancybox 的内容脚本中访问。

我很想知道任何可能的解决方法来完成这项工作。

在 Chrome 扩展程序中，这是微不足道的。在my_fancybox_stuff.js，我可以打电话给chrome.extension.sendMessage()，它可以工作。

提前致谢！

编辑：添加一些代码来澄清我的情况。简化代码以节省人们阅读它的时间。这就像hello world一样简单。

从 contents_scipt.js（用 page-mod 注入）我调用：

$.fancybox.open(
    {
    // Some irrelevant Fancybox options hidden for clarity
    href:"http://www.mysite.com/my_fancybox_stuff.html
    type: 'iframe'
    }
);

my_fancybox_stuff.html 看起来像这样：

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js"></script>
  <script src="js/my_fancybox_stuff.js"></script>
</head>
<body>
<div id="my-wrapper">
  <div id="my-form-div">
    <form id="my-form" action="#">
      <div>
        <div><p>Name</p></div>
        <div><input id="fullname" type="text" name="fullname" value=""></div>
      </div>
      <div>
        <div><p><a id="my-button" href="#">Press this</a></p></div>
      </div>
    </form>
  </div>
</div>
</body>

在 my_fancybox_stuff.js 中，当按下按钮（“my_button”）时，我想发送一条包含输入字段值（“fullname”）的消息并在 content_script.js 中监听。

【问题讨论】：

标签： iframe fancybox firefox-addon firefox-addon-sdk content-script

【解决方案1】：

是的，您的 my_fancybox_stuff.js 可以使用 postMessage () 与您的插件内容脚本进行通信。

见the documentation and examples at MDN。

【讨论】：

谢谢布洛克！实际上，在发送问题之前，我正在阅读有关 window.postMessage 的信息，并且在您回答后我一直在阅读。对于任何网络东西，我都是一个傻瓜，我都对如何在我的情况下实现它感到困惑。我的意思是，当我想在（page-mod 启动的）内容脚本中收听消息时，window.postMessage 中的“窗口”应该是什么？也许我应该在我的问题中添加一些代码。
对。我编辑了问题并添加了一些简化的代码来澄清我的情况。
我终于让它工作了。我只需要在 my_fancybox_stuff.js 中调用 window.parent.postMessage。在 content_script 我调用了 addEventListener("message", receiveMessage, false) 并定义了 receiveMessage 回调函数。 “window.parent”对我来说是决定性的部分。布洛克，感谢您的重要帮助。接受你的回答。