IFrame resizing with easyXDM

问题:

I give my iFrame code to clients, so they can display the dynamic content from my site. I'd like the iFrame that lives on their page to resize to fit my content. I followed the instructions from the easyXDM site, but maybe I am missing something.

I don't get any errors, but the iFrame stays the default height (150px). The code I give my client site is :

<script src="http://test.pronetis.net/SNM.CMS/js/easyXDM/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript">
  var transport = new easyXDM.Socket({
    remote: "http://www.lipsum.com/",
    container: "container",
    onMessage: function (message, origin) {
      this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
    }
  });
</script>
<div id="container"></div>

And this is the code that goes on the document I want to embed :

<script src="http://test.pronetis.net/SNM.CMS/js/easyXDM/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript">
  var socket = new easyXDM.Socket({
    onReady: function () { socket.postMessage(document.body.scrollHeight) }
  });
</script>

I'm hoping there is something simple I'm doing wrong...

回答1:

This very late but you haven't added any backup transport methods. Put the name.html file and easyxdm.swf file in the root of your website and then use the amended code below

Customers website

Add the remoteHelper property to point to your name.html, and add the swf property to point to your easyxdm.swf file.

<div id="container"></div>
<script src="http://test.pronetis.net/SNM.CMS/js/easyXDM/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript">
  var transport = new easyXDM.Socket({
    remote: "http://www.lipsum.com/",
    remoteHelper: "http://www.lipsum.com/name.html",
    swf: "http://www.lipsum.com/easyxdm.swf",
    container: "container",
    onMessage: function (message, origin) {
      this.container.getElementsByTagName("iframe")[0].style.height = message + "px";
    }
  });
</script>

Your website

Add the property local to point to the name.html in your root.

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

You should also ensure that the snippet on your website is underneath all of the content of your page, so it's probably best to put right before the </body> tag.

You can download the easyxdm latest release that contains name.html and easyxdm.swf from here.