从iframe到被调用方的window.postMessage，iframe和被调用方都在同一域中

Question

从iframe到被调用方使用window.postMessage时遇到问题。 iframe和被调用者都在同一个域中。

callee-第一个注册的侦听器，用于侦听消息。 在被调用者处使用Marionette.js，以下是被调用者处的代码

return Marionette.ItemView.extend({
        initialize: function(opts){
            window.addEventListener('message', this.listenToMessage);
        },
// 'listenToMessage' never gets called
listenToMessage: function(message){
            console.log('message received from iframe');
        }

    });
});

从iframe发布消息的代码。确保window.postMessage成功，因为它不会进入window.onerror，但消息不会接收到，以下是iframe onload中的代码

 <script>
        window.onload = function() {
            var origin = document.location.origin; //-->https://dev03.com
            console.log('About to post message ---> ' origin: '+origin);
            window.postMessage('Hi this message is from iFrame', origin);

        };

        window.onerror = function(message, source, lineno, colno) {
            console.log('message --> '+message);
            console.log('source --> '+source);
            console.log('lineno --> '+lineno);
            console.log('colno --> '+colno);
        }
    </script>

Answer 1

根据MDN documentation，应该在目标窗口上调用postMessage函数。在您的代码中，您将在iframe的窗口中调用它。请尝试以下操作，看看是否可行。我还没有测试过，但是从我的阅读中应该可以。

 <script>
    window.onload = function() {
        var origin = document.location.origin; //-->https://dev03.com
        console.log('About to post message ---> ' origin: '+origin);

        var targetWindow = window.opener; //added this
        targetWindow.postMessage('Hi this message is from iFrame', origin);//changed target

    };

    window.onerror = function(message, source, lineno, colno) {
        console.log('message --> '+message);
        console.log('source --> '+source);
        console.log('lineno --> '+lineno);
        console.log('colno --> '+colno);
    }
</script>

编辑

我猜window.opener属性取决于调用的window.open()吗？ IDK。无论哪种情况，window.parent或window.top都适用于您的用例（我这次进行了测试）。

var targetWindow = window.parent; //added this
targetWindow.postMessage('Hi this message is from iFrame',origin);//changed target

Answer 2

@dgeare，感谢您的帮助，您的回答帮助我获得了清晰的见识

问题是

a。在我的本地计算机上只有2帧，即在我的浏览器控制台window.frames.length = 2
b。在我们的开发环境中，有3个框架，即控制台window.frames.length = 3

在我们的开发环境中，我的iframe是发布消息的第三个框架   因此window.postMessage将不起作用，因为没有与该窗口对象绑定的onMessage侦听器。因此，邮件丢失了

我在第二帧（第二个窗口对象）

上注册了侦听器

在我之前对您的回答的答复中，我提到了

”如果我复制此命令window.postMessage（'嗨，这是来自iframe'，'dev03.com'）; 在浏览器的控制台上转到侦听器（listenToMessage）， 但我不明白为什么无法从iframe的onload脚本中执行相同的代码”

使用dev03浏览器控制台了解其工作原理

实际上，当我粘贴命令window.postMessage（'嗨，这是来自iframe'，'dev03.com'） 我的控制台位于第二帧的上下文中，并且侦听器也位于此窗口对象上，这就是为什么它起作用的原因

解释其在本地浏览器控制台上的工作方式

因为我的本地只有2帧 如果iam是在iframe的上下文中，则

window.parent.postMessage（'嗨，这是来自iframe'，'local.com'）；

window.top.postMessage（'嗨，这是来自iframe'，'local.com'）;

两者都相同