easyXDM为iframe增加了神秘的额外高度

Question

我必须将服务提供商的内容放在父网站的iframe中。iframe内容的高度将根据用户交互而动态变化。

我面临的问题是iframe增加了一些额外的高度。我不确定这个高度是从哪里来的。

任何见解都值得赞赏。

链接到页面

Answer 1

我不认为这是easyXDM的错。

看起来，正在计算的高度是针对iframe的当前宽度。如果删除HTML文件中的第28行，您将看到高度已完全填满。（或者下面一行）（或者你可以让代码保持原样，并在你的开发工具中禁用高度样式，然后查看结果）

  this.container.getElementsByTagName("iframe")[0].style.width = "500px";

由于很难在调试器中修改代码，我接下来要尝试的是，在填充内容和计算出的高度之前，将宽度设置为您希望的宽度。

Answer 2

我遇到了同样的问题当您将高度指定给iframe元素时，不要将其指定给所有iframe。因为它会影响广告和社交媒体插件中的iframe。

所以我做了以下

$('#divID iframe').height(easyXDMmessage);
$('#divID iframe').width('100%');

Answer 3

在iframe为空的情况下，我遇到了一个问题，如果将高度设置为0px，父块元素仍将显示至少一行空文本。这是因为iframe实际上是内联元素，所以即使iframe本身为零高度，它们的父块仍将显示一行高度的文本。这里有一个简单的解决方案：

iframe#my_iframe { display:block; }