window.postMessage Tip: Child-To-Parent Communication

By  on  

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


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 ""

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!:  ',;

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • TextboxList for MooTools and jQuery by Guillermo Rauch

    I'll be honest with you: I still haven't figured out if I like my MooTools teammate Guillermo Rauch. He's got a lot stacked up against him. He's from Argentina so I get IM'ed about 10 times a day about how great Lionel...

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations...


  1. kevin

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

  2. Stanton W. Jones


    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.


  3. Hi,
    My outside of iframe facny box is not working in how to solve that problem.

  4. 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.

  5. karstrasse


    I am getting an error:

    Uncaught TypeError: Object # has no method 'postMessage' even though I am able to get the iframe and its details.

  6. 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

  7. 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?

  8. coderone

    It just works :)

  9. Gopinath

    Some browsers supports only ‘string’ message than any other objects(Eg:JSON)

    • Nerudo

      You can simply use

  10. john

    Could you do it like this also?

    //the iframe code
    setInterval(function() {
    //The parent code
    $(window).on('message', function(e){
      console.log('parent received message!:  ',;
  11. Pandi

    Can postmessage work for HTTPSHTTPS communications?

  12. Mariano

    Thanks, it was very useful and simple.

  13. 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?


    • Sheena

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

  14. var wd_iframeWin = document.getElementById("iframe_id").contentWindow;
    	wd_iframeWin.postMessage(JSON.stringify({"third_party_cookie":wd_getCookie(cookiename)}), "*");
  15. How to do parent-to-child communication ?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!