window.postMessage from iframe to callee, both iframe and callee are in same domain

Question

Having problems in using window.postMessage from iframe to the callee. Both the iframe and callee are in same domain.

callee -- 1st registered listener, which listens to the message. Using Marionette.js at calle, below is the code at callee

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');
        }

    });
});

The code which is posting the message from iframe. Made sure window.postMessage is successful because its not going to window.onerror, but the message is not going to receiver, below is the code in 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

according to the MDN documentation the postMessage function should be called on the target window. In your code, you would be calling it on the iframe's window. Try the following and see if that works. I haven't tested it, but from what I read it should.

 <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>

EDIT

I guess the window.opener property depends on the window.open() being called? IDK. In either case, the window.parent or window.top should work for your use case (I tested this time).

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

Answer 2

@dgeare, thanks for your help, your answer helped me in getting clear insight

the issue was

a. on my local there were only 2 frames ie on my brower console window.frames.length = 2
b.on our dev environment there are 3 frames ie on console window.frames.length = 3

on our dev environment, my iframe is the 3rd frame which is posting the message therefore window.postMessage won't work, becoz there is no onMessage listener tied to this window object. Therefore, the message is lost

I registered the listener on 2nd frame (2nd window object),

In my previous response to your answer, I mentioned

"if I copy this command window.postMessage('Hi this is from iframe', 'dev03.com'); on browser's console its going to the listener (listenToMessage), but I dont understand why the same code doesn't get executed from the onload script of iframe"

reason how it was working was dev03 browser console

actually when I pasted the command window.postMessage('Hi this is from iframe', 'dev03.com') my console was in the context of 2nd frame and the listener is also on this window object, thats why it was working

reason how it was working on local browser console

As there are only 2 frames in my local If iam in the context of iframe, then

window.parent.postMessage('Hi this is from iframe', 'local.com');

window.top.postMessage('Hi this is from iframe', 'local.com');

both refer the same