jQuery doesn't support postmessage event?

Question

When I use jQuery event listener to handle message event, like below:

$(window).on('message', function(e) {
    var data = e.data; // data = undefined
});

data is undefined! I'm sure that I have passed data to current window. Because if I use "addEventListener", everything goes well!

So, what's the problem?

Solution 1

jQuery might be preprocessing the event's data property, and this operation may not properly support the message event (yet).

Try using the originalEvent property to fetch your data:

$(window).on("message", function(e) {
    var data = e.originalEvent.data;  // Should work.
});

Solution 2

Some browsers use the "onmessage" event. I suggest a little improvement to the previous answer for increased compatibility:

$(window).on("message onmessage", function(e) {
    var data = e.originalEvent.data;
});

Comments

[ceejayoz]

A +1 for you, this just helped me stop pulling my hair out.

[grim]

What is the best way to also handle "onmessage" in IE?

[Frédéric Hamidi]

@grim, IE has problems in its support for postMessage(). See developer.mozilla.org/en-US/docs/Web/API/… and Is cross-origin postMessage broken in IE10?.

[Jezer]

+1 - a solution I was looking for. yet I could not unbind the event using $(window).off("message"). on the other hand, $(window).bind / $(window).unbind successfully attached / detached for me a handler to the message event.