View Full Version : sending data from iframe to iframe (cross domain

05-18-2012, 11:50 AM
Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

05-18-2012, 12:23 PM
If you can add scripts to both domains then you could use postMessage to communicate between them in modern browsers. See http://javascriptexample.net/bom14.php for more info. Without access to add scripts to both pages it can't be done for security reasons.

05-18-2012, 02:36 PM
Both domains are accesible by me so that's no problem, I understand that i should use postMessage but I do not know how to use this to send a value from the textbox on the right (iframed) to a different textbox (iframed)...

So if you have or can make a small example I should be able to implement this in my site.

Thanks in advance!

rnd me
05-18-2012, 08:05 PM
the first part, sending the message from the iframe page, is easy: top.postMessage("mydata", "*")...

the 2nd part is tougher. you have to add an event handler to the top page, watching for the "message" event on window. addEvent(window, "message", fnMyHandler)...

fnMyHandler needs to be custom per project. basicall inside that function, arguments[0].data is the message passed, "mydata" in this example.
you should consider verifying the origin of the sending frame, but based on what you described, i don't think security is much of an issue for this project...

in action: http://html5demos.com/postmessage2

05-21-2012, 08:15 AM

I've got that working but now comes the harder part...
I've got 5 textboxes in my Iframe on the right and I would like to send those 5 values to the 5 textboxes in the middle...

I can now send just one value (e.data) but how do I combine those 5 values and then take apart those 5 values and put them back in a textbox?

rnd me
05-21-2012, 08:24 AM

I can now send just one value (e.data) but how do I combine those 5 values and then take apart those 5 values and put them back in a textbox?

you make an object with all 5, and send the json version of that object as e.data...


var boxes=[

var asString=JSON.stringify(boxes);
//send asString.

//on receiving end,

var boxes=JSON.parse(e.data);

ta1.value = boxes[0];
ta2.value = boxes[1];
ta3.value = boxes[2];
ta4.value = boxes[3];
ta5.value = boxes[4];

of course, you need to sub ta1 for a reference to your first textarea, and so on, but this is the idea...