Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing Messages from iFrame Across all Browsers

I have an embed-able iframe that will be used on 3rd party sites. It has several forms to fill out, and at the end must inform the parent page that it is done.

In other words, the iframe needs to pass a message to it's parent when a button is clicked.

After wading through oceans of "No, cross-domain policy is a jerk" stuff, I found window.postMessage, part of the HTML5 Draft Specification.

Basically, you place the following JavaScript in your page to capture a message from the iframe:

window.addEventListener('message', goToThing, false);

function goToThing(event) {
    //check the origin, to make sure it comes from a trusted source.
    if(event.origin !== 'http://localhost')
        return;

    //the event.data should be the id, a number.
    //if it is, got to the page, using the id.
    if(!isNaN(event.data))
        window.location.href = 'http://localhost/somepage/' + event.data;
}

Then in the iframe, have some JavaScript that sends a message to the parent:

$('form').submit(function(){
    parent.postMessage(someId, '*');
});

Awesome, right? Only problem is it doesn't seem to work in any version of IE. So, my question is this: Given that I need to pass a message from an iframe to it's parent (both of which I control), is there a method I can use that will work across any (>IE6) browser?

like image 872
Dusda Avatar asked Sep 20 '11 01:09

Dusda


2 Answers

In IE you should use

attachEvent("onmessage", postMessageListener, false);

instead of

addEventListener("message", postMessageListener, false);
like image 92
Kaszaq Avatar answered Oct 05 '22 15:10

Kaszaq


The main work-around I've seen used involves setting a hash value on the parent window and detecting the hash value in the parent, parsing the hash value to obtain the data and do whatever you want. Here's one example of doing that: http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/. There are more options via Google like this one: http://easyxdm.net/wp/.

like image 44
jfriend00 Avatar answered Oct 05 '22 13:10

jfriend00