使用easyXDM调整IFrame大小

时间:2012-11-28 17:44:54

标签: javascript iframe easyxdm

我将iFrame代码提供给客户,以便他们可以显示我网站上的动态内容。我喜欢他们页面上的iFrame调整大小以适应我的内容。我按照easyXDM网站上的说明进行操作,但也许我遗漏了一些东西。

我没有收到任何错误,但iFrame保持默认高度(150px)。我给客户网站的代码是:

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

这是我要嵌入的文档的代码:

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

我希望有一些简单的事我做错了......

1 个答案:

答案 0 :(得分:1)

这很晚但你还没有添加任何备份传输方法。将 name.html 文件和 easyxdm.swf 文件放在您网站的根目录中,然后使用下面修改的代码

客户网站

添加 remoteHelper 属性以指向 name.html ,并添加 swf 属性以指向 easyxdm。 swf 档案。

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

您的网站

添加属性本地以指向根目录中的name.html。

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

您还应该确保网站上的代码段位于网页的所有内容之下,因此最好放在</body>代码前面。

您可以从here下载包含 name.html easyxdm.swf 的easyxdm最新版本。