javascript - Chrome 上 window.postMessage 的问题

Question

我已经坚持了几个小时。

我在 http://example.com 上有一个.html包含带有 src 的 iframeb.html http://subdomain.example.com . a.html 有一些 JS 代码将消息发布到 iframe。

postMessage 的代码很简单:

iframe_window.postMessage('message', iframe_element.src)

但这样一来，Chrome 就会抛出一个错误:

Unable to post message to http://subdomain.example.com. Recipient has origin null.

我也试过:

iframe_window.postMessage('message', 'http://subdomain.example.com')

但运气不好!

这是唯一可行的方法:

iframe_window.postMessage('message', '*')

但是听说'*'不好用。

在 Firefox 中没有问题。

Answer 1

看起来这可能是发送信号时未加载子 iframe 的问题，因此 iframe.src 没有正确的值。

我做了一些测试并得到了与您相同的错误，但是当我将 postMessage 调用包装在 setTimeout 中并等待 100 毫秒时没有错误，这告诉我这是一个初始化竞争条件。

下面是我如何在没有 setTimeout 的情况下实现更简洁的解决方案:

家长:

window.addEventListener("DOMContentLoaded", function() {

    var iframe = document.querySelector("iframe")
      , _window = iframe.contentWindow

    window.addEventListener("message", function(e) {

        // wait for child to signal that it's loaded.
        if ( e.data === "loaded" && e.origin === iframe.src.split("/").splice(0, 3).join("/")) {

            // send the child a message.
            _window.postMessage("Test", iframe.src)
        }
    })

}, false)

child :

window.addEventListener("DOMContentLoaded", function() {

    // signal the parent that we're loaded.
    window.parent.postMessage("loaded", "*")

    // listen for messages from the parent.
    window.addEventListener("message", function(e) {

        var message = document.createElement("h1")

        message.innerHTML = e.data

        document.body.appendChild(message)

    }, false)

}, false)

这是一个简单的解决方案，子进程会向任何人发出它已加载的信号(使用“*”，这没关系，因为没有发送任何敏感信息。)父进程监听已加载的事件并检查它是否是子进程它对发射它感兴趣。

然后父节点向子节点发送一条消息，子节点准备好接收它。当 child 收到消息时，它会将数据放入

并将其附加到 。

我在 Chrome 中用实际的子域测试了这个，这个解决方案对我很有效。