javascript postMessage not working

Question

I don't know what to do. I tried several sample codes from different sources, I tried them in different browsers (from Chrome 9 to FF 4), and still nothing seems to be working with the "postMessage" function. JS console is giving me nothing, not a single error, still nothing is happening : the frames don't want to communicate. At all. And this isn't even cross-domain : both frames are from my domain.

Here is a sample code from the last try : Parent frame :

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

Child frame :

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

Help much appreciated, thanks a lot

Do you have only 2 levels in your iframe? May be `top` is not where your listener is declared. May be try with `parent.postMessage`. — Mic, Jun 20 '11 at 13:37
Did you try my answer at: http://stackoverflow.com/questions/3457391 ? — Mic, Jun 20 '11 at 13:43
ok I got it working............... apparently DOMAIN must not end with a slash. sigh. — Cystack, Jun 20 '11 at 13:46
ah... I just tried with a real url, and it worked fine. Probably must have a `/` yes :) — Mic, Jun 20 '11 at 13:47

score 20 · Accepted Answer · answered Jun 20 '11 at 13:46

20

The second parameter of your postMessage must be an url like http://localhost

answered Jun 20 '11 at 13:46

Mic

23,536
8
55
69

5

Alternatively, the parameter can be `"*"`... which I **highly** discourage for anything but testing purposes. – Courtney Christensen Mar 29 '12 at 17:44

score 3 · Answer 2 · answered Apr 20 '17 at 15:26

3

If you are not dealing with different origins, entering location.origin as the targetOrigin will work.

top.postMessage('hello', location.origin);

answered Apr 20 '17 at 15:26

James Lawruk

26,651
19
117
128

score 3 · Answer 3 · answered Jan 21 '19 at 20:16

you can also send the message to any window use top.postMessage('hello', "*");

Html 1:

<iframe src="IFRAME_URL"></iframe>
<script>
window.addEventListener( "message",
  function (e) { 
        alert(e.data);
  },
  false);
</script>

html 2:

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

score 1 · Answer 4 · answered Oct 30 '13 at 20:52

1

I'm not sure of the security concerns, but typically, I just grab the parent window location like this:

var url = (window.location != window.parent.location) ? document.referrer: document.location;
top.postMessage('message', url);

answered Oct 30 '13 at 20:52

Phil LaNasa

2,703
1
22
16

1

The result is that everyone who includes your iframe in his page, will receive the messages. Afaik it's as unsafe as using "*" for the origin. – RiZKiT May 29 '18 at 15:28

javascript postMessage not working

4 Answers4

Linked