Do you need "name.html" for EasyXDM iFrame resizing?

Question

Does anyone know if you require the "name.html" easyxdm file when resizing a browser cross-domain, and if you do, where do you tell easyxdm to look for it?

I currently pull a booking form from another website in an iFrame, however I can't see any examples where the name.html is referenced, so I'm worried I haven't set it up correctly.

The page does appear to work though, I'd just like to make sure I have everything covered.

A demo of what I'm using is here: Test page pulling data from dev site on another domain.

Here is my easyxdm code on the consuming website, should it perhaps be specified somehow in this javascript?

<div id="container" style="width: 100%;"><div id="loadingmsg" style="color:white; font-size: 12pt;">Loading...</div></div>
    <script type="text/javascript">
    new easyXDM.Socket({
        remote: "http://dev.ultimatetripstore.com/Book/Arrival-External?pid=1&SkinSrc=/portals/_default/skins/_default/no%20skin&ContainerSrc=/portals/_default/containers/_default/no%20container&bgcolor=000&fontcolor=fff&themecolor=d80c8c&hcolor=ffffff",
        swf: "http://dev.ultimatetripstore.com/easyxdm.swf",
        container: document.getElementById("container"),
        onMessage: function(message, origin){
            this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
            this.container.getElementsByTagName("iframe")[0].style.width = "100%";
            this.container.getElementsByTagName("iframe")[0].frameborder = 0;
            this.container.getElementsByTagName("iframe")[0].style.border = "0px solid red";
            this.container.getElementsByTagName("iframe")[0].scrolling="no";
        }
    });
    </script>

Alex · Accepted Answer · 2013-11-08T03:36:52.240

After looking through the easyXDM.js file I found how to add the name.html file correctly.

This is assuming you already have the iFrame working to some degree.

On the provider website

Add name.html to the root of the directory

At the bottom of your providing page add the following snippet, make sure you include the local property and set it to the location of your name.html file.

<script type="text/javascript">
var socket = new easyXDM.Socket({
    local: "name.html",
    onReady: function () {
    socket.postMessage(document.body.scrollHeight);
    }
});
</script>

On the consumer website

Add the remoteHelper property to your existing javascript snippet and point it to the consumers name.html file. So in my case it was:

<div id="container" style="width: 100%;"></div>
<script type="text/javascript">
new easyXDM.Socket({
    remote: "http://dev.ultimatetripstore.com/Book/Arrival-External?pid=1&SkinSrc=/portals/_default/skins/_default/no%20skin&ContainerSrc=/portals/_default/containers/_default/no%20container&bgcolor=000&fontcolor=fff&themecolor=d80c8c&hcolor=ffffff",
    remoteHelper: "http://dev.ultimatetripstore.com/name.html",
    swf: "http://dev.ultimatetripstore.com/easyxdm.swf",
    container: document.getElementById("container"),
    onMessage: function(message, origin){
        this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
        this.container.getElementsByTagName("iframe")[0].style.width = "100%";
        this.container.getElementsByTagName("iframe")[0].frameborder = 0;
        this.container.getElementsByTagName("iframe")[0].style.border = "0px solid red";
        this.container.getElementsByTagName("iframe")[0].scrolling="no";
    }
});
</script>

Hope this helps someone else.

there is so few people that have worked with easyXDM. May you look at http://stackoverflow.com/questions/27203172/easyxdm-download-files-from-3rd-party-service please? — VB_, Nov 29 '14 at 22:32

Do you need "name.html" for EasyXDM iFrame resizing?

1 Answers1