How to Use Window.Postmessage Across Domains

How do you use window.postMessage across domains?

Here is an example that works on Chrome 5.0.375.125.

The page B (iframe content):

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

Note the use of top.postMessage or parent.postMessage not window.postMessage here

The page A:

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; }
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A and B must be something like http://domain.example

From another question, it looks the domains(A and B here) must have a / for the postMessage to work properly.

Cross domain postMessage, identify iFrame

you can use window names for this, as they pass from iframe tag to iframe context.

parent doc:

<iframe name=fr2 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20window.name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>
<iframe name=fr3 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe>

<script>onmessage = function(e){ // use real event handlers in production
       alert("from frame: " + e.data.name);
 };</script>

iframe doc:

<html>
 <script> parent.postMessage({name: name}, "*");</script>
</html>

which alerts "fr2", then "fr3".
you can then easily use the name attrib to find the iframe in the parent DOM using attrib CSS selectors.

illustrative demo of window.name+iframe concept: http://pagedemos.com/namingframes/

this painfully simple approach is also immune to issues arising from same-url iframes.

How can I do cross-domain postMessage?

Currently, I am seeing two issues. Slight error in the code and the timeout issue.

1) The error I am seeing in your code is that you're using document.addEventListener. I think the right one is window.addEventListener. It is in the example on the postMessage page.

2) With the timeout, you can have the child window postMessage to the parent. The parent window will then know when the child is ready.

How to Send Data Cross Domain using postMessage?

I was finally able to get this working.

Here is what I did.

First I came across a plugin that helps facilitates the window.postMessage.

With the postMessage plugin I used the following code:

iFrame JS Code

var fileUploaded = data;
 pm({
     target: window.parent,
     type: "message5", 
     data:fileUploaded 
});

Full code with Uploadify Script:

$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : '/js/uploadify/uploadify.php',
        'onUploadSuccess' : function(file, data, response) {
            var fileUploaded = data;
            pm({
              target: window.parent,
              type: "message", 
              data:fileUploaded 
         });
       } 
    });
});

Receiving Window/Parent Window JS Code

pm.bind("message", function(data) {
//Function to insert data onto page
});

Full Code for my Page:

pm.bind("message", function(data) {
  var myframe, nestedFrame;
  myFrame = $('#editorf').contents().find('body');
  nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
  nestedFrame.append('data'); 
});

This plugin has several options and simplified the process greatly.

How to properly use postMessage to do cross-domain messaging with html5 and modern browsers ? I still get errors

I've just tried your code and this seems to work in Chrome. It uses jsfiddle and jsbin to pass messages between parent and child windows.

http://jsbin.com/oxesef/4/edit#preview

Can not access iframe elements of cross domain using postmessage

Simply, How can I access child window's element from top window with different domain?

You can't. You can only post messages between the documents.

So if you want to do something with an element on the other page then you need:

Send a message asking for that thing to be done to that element
Write code to listen for that message and do that thing

For example

Parent page

<!DOCTYPE html>
<meta charset="utf=8">
<title>Parent</title>
<script>
    addEventListener(
      "message",
      function(e) {
        if (e.origin !== "http://localhost:8080") {
          return;
        }
        if (e.data.message === "Ready and waiting") {
            console.log("Message recieved from child iframe");
            // Now we know the document has loaded into the frame and is ready to recieve messages. 
            document.querySelector("iframe").contentWindow.postMessage({
                message: "Remove",
                selector: "#b"
            },
            "http://localhost:8080")
        }
      }
    );
</script>
<iframe src="http://localhost:8080/frame.html"></iframe>

Framed page

<!DOCTYPE html>
<meta charset="utf=8">
<title>Child</title>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<script>
    window.parent.postMessage({ message: "Ready and waiting" }, "http://localhost:8081");

    addEventListener(
        "message",
        function(e) {
            if (e.origin !== "http://localhost:8081") {
                return;
            }
            console.log("Message recieved from child iframe", e.data);
            if (e.data.message === "Remove") {
                document.querySelector(e.data.selector).remove();
            }
        }
    );
</script>

Iframe to parent using postMessage for cross domains

You need to attach to the window object, not the iframe, to receive messages from the iframe.

window.addEventListener(function(e) {}));

In the message you send you should include info that lets the parent identify the iframe sending the message, as all messages from all windows will be processed by this event handler.

Also note that addEventListener only works in some browsers. Older IE versions use attachEvent.