People generally load iframe of different domain/origin in their webpage. Like may sites have the iframe of youtube loaded in it. Sometimes you need to communicate with these iframes but due to cross origin security reasons you are not able to do it.
Consider a case when you host a video player on your server and you are embedding this video player in your webpage which is in different domain. Now you want to display the lyrics in your webpage as you start playing the video in your iframe. This time you own the iframe too, so there should be a way to communicate with your webpage.
The way we use for this is called window message passing. To explain this clearly i have hosted two websites, address of first one is http://localhost:8888 and second one is http://localhost:9000. In the page of http://localhost:8888, i am embedding iframe of http://localhost:9000 . So here the parent is http://localhost:8888 and the child is http://localhost:9000 .
index.php
of http://localhost:8888
<body>
<iframe id = "iframe1" name = "iframe1" src = "http://localhost:9000" height = "700px" width = "500px">
</iframe>
</body>
Sending message from Parent to Child
Sending message from parent
#javascript
document.getElementById("iframe1").contentWindow.postMessage("hi_from_parent_8888","http://localhost:9000");
Receiving message in child
function listener(event){
console.log(event.origin);
console.log(event.data);
#any action you can write here
}
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
On listening event.origin would return http://localhost:8888 & event.data would return test hi_from_parent_8888. So you can apply a check at the time of receving too to apply action only on messages coming from valid domains.
##Sending message from Child to Parent
Sending message from child
parent.postMessage("hi_from_parent_9000","http://localhost:8888");
Receiving message in parent
function listener(event){
console.log(event.origin);
console.log(event.data);
#any action
}
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}