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

Question

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

我面临的问题是 iframe 添加了一些额外的高度。我不确定高度来自哪里。

任何见解表示赞赏。

链接到页面

Answer 1

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

所以我做了以下

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

Answer 2

我不认为这是easyXDM的错。

似乎正在计算的高度是针对 iframe 的当前宽度。如果您删除 HTML 文件中的第 28 行，您将看到高度已完全填充。（或以下行）（或者您可以保留代码原样，并在开发人员工具中禁用高度样式并查看结果）

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

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

Answer 3

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

iframe#my_iframe { display:block; }