iframe cross domain messaging with jQuery postMessage plugin

Question

I am trying to communicate between a child iframe and its parent using the following plugin:

http://benalman.com/projects/jquery-postmessage-plugin/

I can follow the example and post a message from the child to the parent but not the other way and i really need to be able to communicate both ways.

The code on the parent is as follows:

var origin = document.location.protocol + '//' + document.location.host,
    src = origin + '/Custom/Ui/Baseline/html/iframe-data-cash.htm#' + encodeURIComponent(document.location.href);

$(function () {

    var $holder = $('#iframe'),
        height,
        $iframe = $('<iframe src="' + src + '" id="data-cash-iframe" width="100%" scrolling="no" allowtransparency="true" seamless="seamless" frameborder="0" marginheight="0" marginwidth="0"></iframe>');

    // append iframe to DOM
    $holder.append($iframe);

});

$(window).load(function () {
    $.postMessage(
        'hello world',
        src,
        parent.document.getElementById('data-cash-iframe').contentWindow
    );
});

And the code on the child is as follows:

$(function () {

    var parentURL = decodeURIComponent(document.location.hash.replace(/^#/, ''));

    $.receiveMessage(
        function (e) {
            alert(e.data);
        },
        parentURL
    );

});

I really cannot see why this is not working and am in desperate need of help!

Answer 1

1.sendPage
<script type='text/javascript'>
var sendpost = document.getElementById('wrapper').scrollHeight;
var target = parent.postMessage ? parent : (parent.document.postMessage ?   parent.document : undefined); 
target.postMessage(sendpost,'*');
</script>
2. real iframe load page
function handling(e){
                sendIframeHeight = e.data;
}

// <= ie8
if (!window.addEventListener) {
                window.attachEvent("onmessage", handling);
}else{ // > ie8
                window.addEventListener('message', handling, false);
}

Answer 2

I had a similar requirement and ended up using postMessage to send data from the child to the parent. Then, to send data from the parent to the child, I passed the data in a query string through the iframe's src attribute. By doing so, I could then parse the query string and retrieve the data within my child page.