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>
Was it helpful?

Solution

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

  1. Add name.html to the root of the directory
  2. 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

  1. 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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top