easyXDM iFrame auto-height failing

Question

I have followed the instructions here and here but am not able to implement easyXDM correctly to auto-size the height of my iframe.

On the page with the iframe (host.html), I can see the contents I am importing (otherdomain.html) but the height of the iframe is much shorter than the contents, and the height does not change. Unfortunataely this is on a development site I can not link to here.

otherdomain.html has elements that expand on click so I need the iframe to expand and contract as the contents of the page do so.

Can anyone tell me what I am doing wrong please? These are two different domains/servers I am working with. This is the first time I have set up a socket or done anything like this - I don't see any errors in the console but I can't make much sense out of the what it is telling me.

Here is a similar question, but was not answered: IFrame resizing with easyXDM

Here is what I have on the page that has the iFrame:

        <style type="text/css">
            div#embedded iframe {
                width: 725px;
            }
        </style>  
        <script src="../js/easyXDM.debug.js" type="text/javascript"></script> 
        <script type="text/javascript" language="javascript">
        new easyXDM.Socket({
            remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
            container: "embedded",
            onMessage: function (message, origin) {
                var settings = message.split(",");
                this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
                this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
            }
        });

        </script>
        <div id="embedded"></div>

Here is what I have on resize_intermediate.html:

                    <script type="text/javascript" src="../scripts/easyXDM.debug.js">
                </script>
                <script type="text/javascript">
                    var iframe;
                    var socket = new easyXDM.Socket({
                        swf: "../scripts/easyxdm.swf",
                        onReady: function(){
                            iframe = document.createElement("iframe");
                            iframe.frameBorder = 0;
                            document.body.appendChild(iframe);
                            iframe.src = easyXDM.query.url;
                        },
                        onMessage: function(url, origin){
                            iframe.src = url;
                        }
                    });
                    //Probe child.frame for dimensions.
                    function messageBack(){
                        socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth); 
                    };

                    //Poll for changes on children every 500ms.
                    setInterval("messageBack()",500);
                </script>
                <style type="text/css">
                    html, body {
                        overflow: hidden;
                        margin: 0px;
                        padding: 0px;
                        width: 100%;
                        height: 100%;
                    }

                    iframe {
                        width: 100%;
                        height: 100%;
                        border: 0px;
                    }
                </style>

and at the bottom of the page I am importing I have placed this:

        <script type="text/javascript">
            window.onload = function(){
                parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
            };
        </script>