Question

我想在主窗口和页面中加载的iframe之间进行通信。我过去做过这件事（代码仍然有效），但是我不能在另一个项目中使用它。我创建了一个示例来重现该问题。它使用_Le Statique module具有基本服务器端（仅提供一些文件）。

最重要的部分是客户端，但让我们从服务器开始：

服务器（NodeJS）

创建两个服务器（一个监听8000，另一个监听9000）。

// Dependencies
var Statique = require("statique")
  , Http = require('http')
  ;

Http.createServer(new Statique({
    root: __dirname + "/receiver"
}).setRoutes({
    "/": "/html/index.html"
}).serve).listen(8000);

Http.createServer(new Statique({
    root: __dirname + "/sender"
}).setRoutes({
    "/": "/html/index.html"
}).serve).listen(9000);

客户端

接收机

...
window.onload = function () {
    addEventListener("message", function (e) {
        // This part is never fired!
        console.log("2", e.data);
    }, false);
};
...

发件人

...
<body>
    <iframe src="http://localhost:8000" frameborder="0" id="iframe"></iframe>
    <script>
        iframe.contentWindow.postMessage("hi", "*");
    </script>
</body>
...

但是，不会触发来自iframe的"message"个事件。为什么呢？

我在控制台中没有看到任何错误。

Answer 1

iframe窗口未完全加载（没有人监听"message"个事件。）

通过监听iframe加载事件，我们确信所有内容都已加载，我们可以发出事件：

iframe.onload = function () {
    iframe.contentWindow.postMessage("hi", "*");
};

使用postMessage时不会触发“message”事件

服务器（NodeJS）

客户端

接收机

发件人

1 个答案: