使用window.postMessage发送消息给iframe

我陷入了愚蠢的问题。我正在尝试开发一个Firefox扩展，其中有一个弹出式面板，在该面板中有一个tasks.html文件的iframe。使用window.postMessage发送消息给iframe

我想单击按钮在我的网页（说网页与插件的交互），但它不工作，postMessage到该iframe。

以下是面板外观的图像。

Panel

这是函数，男使用将数据发送到的IFRAME。当网页中的按钮被点击时，帖子功能被调用。

function Post() { 
    var iframe = window.document.getElementById("iframe").contentWindow; 
    postMessageToWindow(iframe, "Hello"); 
} 

function postMessageToWindow(win, message) { 
    try { 
     win.postMessage(message, '*'); 
     return true; 
    } catch(e) { 
     return false; 
    } 
}

，并在此html页面，我有

window.addEventListener('message', function(e) { 
    var str_data = e.data; 
    document.getElementById('test').innerHTML = str_data; 
});

，但没有在测试DIV所示得到。

请帮帮我吧。谢谢。

来源

2014-02-23 prateekkathal

面板在同一个域的iframe和HTML文档？ –

@PhilipBevan没有域名。它在Firefox Addon中。在'sample.xul'中''iframe id =“iframe”src =“chrome：//addon/content/sample.html”width =“400px”and height =“400px”>'尽管sample.xul和sample.html位于同一个文件夹中。 – prateekkathal

它不是一个域问题。函数Post（）{...}和函数postMessageToWindow代码在哪里？你正在从iframe onload的头部运行window.addEventListener吗？ – Noitidart

忽略关于win.postMessage的消息我不知道postMessage是“本地”函数。很酷，帮助你我学到了一些东西。

不管怎样，如果你的代码第一次工作，它会很好。感谢来自Blargh的一些信息，我发现你的问题。

找到sample_button.appendChild(tasks_popup);并删除，为什么你这样做？现在它克隆原始对象并添加它。

另一件事，为什么要通过postMessage？你可以简单地做tasks_iframe.contentDocument.querySelector('#test').innerHTML = 'why bother with postMessage, just do this? but i fixed postMessage for you too<br>';

另一件事，300ms的间隔工作，但它的密集而不是最好的解决方案。它现在可以工作了。

您是否有计划将其上传到addons.mozilla.org？他们不喜欢设置innerHTML，如果你打算在那里发布让我知道，我会告诉你如何在没有innerHTML的情况下做到这一点。

而且你的“刷新”按钮，在overlay.xul需要固定document.getElementById('tasks-list').contentDocument.location.reload()

来源

2014-02-25 23:40:44 Noitidart

哦，我的上帝!!!!!!!!对我来说这太愚蠢了，appendChild系列仅用于测试目的，以查看面板是否打开。它必须被注释掉！（我在某个论坛上读到我们应该这样做，所以我做了）。另外，我很乐意知道我们如何以不同的方式向gmail添加按钮。加我skype（prateek.kathal）。再次，该刷新按钮仅用于测试...我甚至没有点击它甚至一次。但我认为我的方式很好，我只是在stackoverflow上阅读了这个。非常感谢Noit。而Blargh，对于这么多麻烦感到抱歉。我应该妥善检查了这一点。 – prateekkathal

将很快为您创建一个演示，了解如何监控gmail位置更改。如果我需要一段时间，请给我提醒。我不介意多次提醒。我做的演示也会对我有所帮助。 – Noitidart

你确定你想用win吗。postMessage，如果你只是访问tasks_iframe.contentDocument，你甚至可以从tasks.html中移除甚至是监听器，保存20行代码 – Noitidart

box.com/s/hxn16axnxbwc151h92g

上安装插件不工作，但我看到这里有一个问题：在3号线

function postMessageToWindow(win, message) { try { window.top.postMessage(message, '*'); return true; } catch(e) { return false; } }

它说：window.top.使用win.top.还我不认为u需要使用.top。只是使用win.postMessage

也是postMessage在iframe中的一个函数？因为当我看到theres没有postMessage功能在你发布的代码中的tasks.html

来源

2014-02-24 05:43:59 Noitidart

不，没有postMessage那里，我们是否也需要在那里？另外，我一直在尝试不同的方式来实现这个功能。如果你看到我的问题，那么给定的'postMessageToWindow'函数是正确的，你想要什么，但不知何故，它不起作用。 – prateekkathal

尝试再次下载它，我已修复该插件，它现在应该可以工作。请帮我解决这个问题:( – prateekkathal

我会绝对帮你的，下载后会稍微看一下，我需要你的合作。谢谢修复bug，它会允许我调试它 – Noitidart

，我没有看到工具栏按钮被添加，它甚至没有在自定义视图中，你测试了你上传的示例代码吗？

addAsTask函数在示例代码中失败了，因为＃sample-button和#TasksPanel等元素不存在。请确保您的测试用例在上传之前工作

来源

2014-02-25 21:13:44 Blargh

编辑：我修改了overlay.xul''''''为'''''' ，如果你希望人们帮助你，尽可能简单地为他们做，否则他们不会帮助你。 – Blargh

按钮实际上显示为自定义工具栏图标中的默认Firefox按钮（前进/后退/引用等等），但是当您将它们拖出到工具栏时，会出现实际按钮。这实际上不会发生在我的插件中，但它是我为您制作的示例插件的一个问题。它实际上并没有在第一时间安装按钮。还需要为此添加脚本。此外，使用postMessage发送的按钮位于Gmail中（转到Gmail，在上面的按钮中，您会看到添加示例任务，单击它 - 这是回调addAsTask（）的按钮） func on click） – prateekkathal

在打开的面板上没有“添加任务”或“打开页面”按钮，只是一个刷新按钮。认真的人，如果你需要帮助，不要让那些帮助你调试并重新创建你的插件来帮助你的人...你不会得到帮助。我不能相信@noit有耐心帮助你......对不起我的沮丧......我有10分钟的时间来看看你的问题，但从来没有能够解决它，因为那么多的其他废话。 – Blargh

使用window.postMessage发送消息给iframe

回答

相关问题