Window.Parent.Postmessage with Parameter

Question

I'm working with an IFrame on my page and making a Communication with Cross Domain IFrame - A Cross Browser Solution using .postmessage in java script

in my IFRAME target page I have something like this:

window.parent.postMessage("Assign to value1", "www.parentpage.com");
window.parent.postMessage("Assign to value2", "www.parentpage.com");

then in my parent page :

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
var value1 = e.data;
var value2 = e.data;

}, false);

I tested it and Its working with single var using value1 only.

Now I want to parametarized my .postmessage if its possible so that I can get the message dynamically. I'm expecting a result of :

value1=Assign to value1
value2=Assign to value2

Any suggestion on how can I achieve that result?

score 30 · Answer 1 · answered Dec 02 '15 at 19:30

30

Cross domain script:

window.parent.postMessage(
    {
        event_id: 'my_cors_message',
        data: {
            v1: 'value1', 
            v2: 'value2'
        }
    }, 
    "*" //or "www.parentpage.com"
);

Client / parent script:

window.addEventListener('cors_event', function(event) {
    if(event.data.event_id === 'my_cors_message'){
        console.log(event.data.data);
    }
});

Output:

{v1: 'value1', v2: 'value2'}

answered Dec 02 '15 at 19:30

gradosevic

4,809
2
36
51

note: You can't provide multiple [targetOrigins](https://stackoverflow.com/a/35939961/234110). It has to be * if you want multiple targetOrigins – Anand Rockzz Dec 20 '17 at 19:32
11

**note2**: if `window.addEventListener('cors_event',..` did not work, replace `cors_event` with `message`. – Anand Rockzz Mar 03 '18 at 15:39
after replacing it's not working any new suggestions thanks @AnandRockzz – Shivam Mishra Sep 02 '22 at 04:09

score 7 · Answer 2 · answered Dec 23 '14 at 16:54

7

Simply pass an object as the data:

window.parent.postMessage({v1: 'Assign to value1', v2: 'Assign to value2'}, "www.parentpage.com");

And then, in the receiver function body:

var value1 = e.data.v1
var value2 = e.data.v2

answered Dec 23 '14 at 16:54

Iazel

2,296
19
23

Window.Parent.Postmessage with Parameter

2 Answers2