Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')
Make sure the target window that you (or Facebook) is posting a message to, has completed loading. Most of the times I've gotten this error were when an iframe I was sending messages to had failed to load.
Another reason this could be happening is if you are using an iframe that has the sandbox attribute and allow-same-origin
isn't set e.g.:
// page.html<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe><script type="text/javascript"> var f = document.getElementById("f").contentWindow; // will throw exception f.postMessage("hello world!", 'http://localhost:8000');</script>// iframe.html<script type="text/javascript"> window.addEventListener("message", function(event) { console.log(event); }, false);</script>
I haven't found a solution other than:
- add allow-same-origin to the sandbox (didn't want to do that)
- use
f.postMessage("hello world!", '*');
To check whether the frame have been loaded, use onload function. Or put your main function in load: I recommend to use load when creating the iframe by js
$('<iframe />', { src: url, id: 'receiver', frameborder: 1, load:function(){ //put your code here, so that those code can be make sure to be run after the frame loaded } }).appendTo('body');