How do you use window.postMessage across domains?

by

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.

More Related Contents:

  1. How do I load an HTML page in a div using JavaScript?
  2. JavaScript: How to find out if the user browser is Chrome?
  3. How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
  4. JSFiddle code not working in my own page
  5. Cross-origin data in HTML5 canvas
  6. How to prevent “The play() request was interrupted by a call to pause()” error?
  7. \u200b (Zero width space) characters in my JS code. Where did they come from?
  8. Chrome Autofill/Autocomplete no value for password
  9. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  10. Is innerHTML asynchronous?
  11. How to clear cache of service worker?
  12. Checkbox Check Event Listener
  13. How do I disable the save password bubble in chrome using Javascript?
  14. How can I retain the scroll position of a scrollable area when pressing back button?
  15. “Status Code:200 OK (from ServiceWorker)” in Chrome Network DevTools?
  16. Animated gif only loops once in Chrome and Firefox
  17. Chrome FileReader
  18. Completely lost on how to save extension popup window content
  19. How to get list of network requests done by HTML
  20. Proper way to reset a GIF animation with display:none on Chrome
  21. jQuery in Chrome returns “block” instead of “inline”
  22. Making a Chrome Extension download a file
  23. Resource interpreted as Script but transferred with MIME type text/plain – for local file
  24. Popstate on page’s load in Chrome
  25. Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
  26. HTML5 drop event doesn’t work unless dragover is handled
  27. Print repeating Page headers in Chrome [closed]
  28. html() vs innerHTML jquery/javascript & XSS attacks
  29. Is there a way to increase the size of localStorage in Google Chrome to avoid QUOTA_EXCEEDED_ERR: DOM Exception 22
  30. XSS attacks and style attributes

Leave a Comment