Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

window.postMessage Tip: Child-To-Parent Communication

By David Walsh on January 26, 2011

I wrote a super epic post a few months back about the window.postMessage API that's sweeping the nation. window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains. My post showed interaction from parent to child and back to the parent, but didn't detail passing messages from a child to a parent without the parent initializing the conversation. Let me show you how you can initialize that conversation from child to parent

window.postmessage

The JavaScript

The parent object provides a reference to the main window from the child. So if I have an iFrame and console the parent within it, the console will read:

// Every two seconds....
setInterval(function() {
	// Send the message "Hello" to the parent window
	// ...if the domain is still "davidwalsh.name"
	parent.postMessage("Hello","https://davidwalsh.name");
},1000);

Since we now have hold of the window, we can postMessage to it:

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);

The directive above triggers the iFrame to send a message to the parent window every 3 seconds. No initial message from the main window needed!

Recent Features

By Landon SchroppMarch 16, 2015
Regular Expressions for the Rest of Us
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
By David WalshJuly 28, 2013
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

By David WalshSeptember 22, 2011
Elegant Overflow with CSS Ellipsis
Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...
By David WalshAugust 22, 2012
HTML5 download Attribute
I tend to get caught up on the JavaScript side of the HTML5 revolution, and can you blame me? HTML5 gives us awesome "big" stuff like WebSockets, Web Workers, History, Storage and little helpers like the Element classList collection. There are, however, smaller features in...

Discussion

kevin
Great article, It worked great on iFrame resizing…WOO HOO! after many failed posts and other methods, this one was so simple.
Stanton W. Jones
Hey,

So I’ve scoured the usual forums for a solution to cross-domain iframe communication, and nothing has worked. Not copy/paste, not my own code, not even on the same domain. A lot can change in a year ( haven’t found an article published in 2012 that tells me how to implement this) but I am in deep need of a sanity check.

–SWJ
sankar s
Hi,
My outside of iframe facny box is not working in chrome.so how to solve that problem.
Baker
Hi David,

Thanks man. I’ve been looking for a solution for iframe resizing across domains since yesterday. I’ve finally found it.

Really appreciate it.
Cheers
karstrasse
Hi,

I am getting an error:

Uncaught TypeError: Object # has no method 'postMessage' even though I am able to get the iframe and its details.
Aayushi
Hey, it looks and works great but on IE, action passed received is undefined.
```
parent.postMessage({'action':'RESIZE', 'height':height}, '*');
```
but here this Action: RESIZE is undefined in postmessage on IE

aewens
This is because some browsers only support strings, so you’d want to use JSON.stringify() and JSON.parse() to deal with sending any kind of data structure that isn’t a string.

Abhi
How do i post the message from iframe which contains https page to a parent page which is http? Even the domains are different? Any idea?
coderone
It just works :)
Gopinath
Some browsers supports only ‘string’ message than any other objects(Eg:JSON)

Nerudo
You can simply use
```
JSON.stringify(yourJSONObject);
```

john

Could you do it like this also?

//the iframe code
setInterval(function() {
	parent.postMessage("Hello","http://davidwalsh.name");
},1000);

//The parent code
$(window).on('message', function(e){
  console.log('parent received message!:  ',e.data);
});

aewens
The way you specified doesn’t work as intended because jQuery puts a wrapper around the returned event object (in your case e) to where e.data is not defined as it is in the article’s examples. For this case, it’d be better to just step outside of jQuery for a moment and use the pure Javascript implementation.

Pandi
Hi
Can postmessage work for HTTPSHTTPS communications?
Mariano
Thanks, it was very useful and simple.
yatin
How to pass message to child ifrmae? I want to get cookie form 3rd party website to child iframe. I have access over script at 3rd party throught which i register iframe and some functions at client end. how to access cookie?

Thanks.

Sheena
Hi did you find a solution for your question. I also have to do the same

yatin

var wd_iframeWin = document.getElementById("iframe_id").contentWindow;
	
	wd_iframeWin.postMessage(JSON.stringify({"third_party_cookie":wd_getCookie(cookiename)}), "*");

Rohit Khatri
How to do parent-to-child communication ?

Sam

Thanks for the post. I am facing issue on parent window. The code

eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);

is not called at all.

Andreas
Nice code, but in IE i get an error in the console:

SCRIPT5: permission denied.
column 1, char 1
Andreas
why is there no
```
if(event.origin !== 'http://scriptandstyle.com') return;
```
like in your other code here: https://davidwalsh.name/window-postmessage ?
Ope Adeyomoye
Works! Thanks!
Yair
Why did you say “send a message to the parent window every 3 seconds” ? I don’t see any interval or timeout in your code sending anything every 3000ms…
Brettster
This was so helpful. I had to pass a message from a react app contained within an iframe to a parent. Works great!

window.postMessage Tip: Child-To-Parent Communication

The JavaScript

Recent Features

Regular Expressions for the Rest of Us

Create a CSS Cube

Incredible Demos

Elegant Overflow with CSS Ellipsis

HTML5 download Attribute

Discussion