Cross-site iframe postMessage from child to parent

Question

I found this sample from SO while browsing for my problem, but I want to know exactly how to use it in my scenario.

I have an iframe which is from another domain, and I want to detect when the iframe URL is changed from one to another page in that other domain. So, what I was thinking is to have something like this when the second page in the iframe is opened:

<script type="text/javascript">
    $(document).ready(function() {
parent.postMessage("Second Page");
}
</script>

That's all I need, I just need to receive message that the iframe has different url. Now on the parent page, I'll might have something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#frame').load(function () { 
            var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
 var secondPageValue = // I want to get the value from the child page here, how can I do that?
},false);               
        });
    });
</script>

I'm trying to use this postMessage option for the first time. Do I need to include some JS libraries such as jQuery on child side to make this work?

possible duplicate of [Html5 - Cross Browser Iframe postmessage - child to parent?](http://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent) — C_B, Apr 04 '14 at 12:07
@C_B I'm trying to get confirmation if thats the way to go before I contact the iframe owner. Thx — Laziale, Apr 04 '14 at 12:27

score 11 · Answer 1 · edited Sep 11 '15 at 09:23

11

You need to set targetOrigin when using postMessage.

<script type="text/javascript">
    $(document).ready(function() {
       parent.postMessage("Second Page",'*');
    }
</script>

Then on the host page.

function addAnEventListener(obj,evt,func){
    if ('addEventListener' in obj){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in obj){//IE
        obj.attachEvent('on'+evt,func);
    }
}

function iFrameListener(event){
     secondPageValue = event.data;
}

var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);

edited Sep 11 '15 at 09:23

Robert Egginton

585
6
16

answered Apr 05 '14 at 20:35

David Bradshaw

11,859
3
41
70

There are several problems with this code. For example, you define the function addEventListener and then rely on window.addEventListener which has just been overridden by your function declaration. Also you should probably be checking if 'addEventListener' in obj rather than window. – Octopus Jul 24 '15 at 20:17

score 6 · Answer 2 · edited Sep 08 '17 at 09:17

Check http://davidwalsh.name/window-iframe out. This is a perfect working example.

The parent object provides a reference to the main window from the child. So if I have an iFrame and console the parent within it, the console will read:

// Every two seconds....
setInterval(function() {
    // Send the message "Hello" to the parent window
    // ...if the domain is still "davidwalsh.name"
    parent.postMessage("Hello","http://davidwalsh.name");
}, 3000);

Since we now have hold of the window, we can postMessage to it:

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);

The directive above triggers the iFrame to send a message to the parent window every 3 seconds. No initial message from the main window needed!

tnx Raidri.. Will do it. – Dilip Rajkumar Apr 13 '15 at 11:16 — Dilip Rajkumar, Apr 13 '15 at 11:16

Cross-site iframe postMessage from child to parent

2 Answers2

Linked

Related