使用window.postMessage将消息发布到iframe

Question

我陷入了愚蠢的问题。我正在尝试开发一个Firefox扩展，其中我有一个弹出式面板，在该面板中，有一个task.html文件的iframe。

我想在我的网页上点击一个按钮postMessage到那个iframe（说与浏览器的网页交互），但它无法正常工作。

以下是Panel面向外观的图像。

这是函数，M用于向iframe发送数据。单击网页中的按钮时会调用Post函数。

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中没有显示任何内容。

请帮帮我。感谢。

Answer 1

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

addAsTask函数在示例代码中失败，因为＃sample-button和#TasksPanel等元素不存在。在上传

之前，请确保您的测试用例有效

Answer 2

忽略我关于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>';

，而不是postMessage

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

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

此外，您在overlay.xul面板中的“刷新”按钮需要修复为document.getElementById('tasks-list').contentDocument.location.reload()

Answer 3

box.com/s/hxn16axnxbwc151h92g

插件在安装时不起作用但我在这里看到了一个问题：

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

在第3行，它说window.top.使用win.top.我也不认为你需要使用.top。只需使用win.postMessage

ifMessage也是iframe中的一个函数吗？因为当我看到在task.html中没有postMessage函数时