ReceiveMessage event showing data as undefined

Question

I have an iframe in which there is a JavaScript function:

  function callParent(){
    parent.postMessage('closeModal','*');   
    return true;
  }

And other JavaScript function in my main page:

$(window).on('message',function(e){
console.log(e);
});

It's printing e but in e.data it's giving undefined. I was expecting data will be a String 'closeModal'.

How to get message String from iframe?

Answer 1

The data you're passing is in

e.originalEvent.data

so on the main page:

$(window).on('message',function(e){
  console.log(e.originalEvent.data);
});

As Pointy commented jQuery creates its own event object.

If you were not using jQuery you would have had

window.onmessage = function(e){
    console.log(e.data);
};