加载新内容时调整 iframe 的高度答案

【问题标题】：Adjust height of iframe when new content is loaded加载新内容时调整 iframe 的高度
【发布时间】：2015-02-05 00:58:17
【问题描述】：

我有一个 iFrame，它包含在我的 HTML 中，并且在页面加载时可用。当页面首次加载时，iFrame 没有 content/src。我正在使用 jQuery 将内容动态插入到 iFrame 中。当用户单击我页面上的链接时，iFrame 的内容会更新。所有这些都对我有用。

但是，当加载新内容时，我很难调整 iFrame 的高度。我在 Stack Overflow 上尝试了几种解决方案，但都没有成功。这是我的 iFrame 代码：

<iframe id="myframe" width="100%" frameborder="0"></iframe>

这是我的 jQuery，它改变了 iFrame 中的 HTML：

emailOpened.find('#myframe').contents().find('body').html(email.body);

这对我有用。我只需要我的 iFrame 根据所注入内容的高度来调整它的高度。我在这部分的所有尝试都失败了。

更新

这是我的新 HTML：

<iframe id="myframe" width="100%" frameborder="0">
  <body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>

【问题讨论】：

你试过检查emailOpened.find('#myframe').contents().find('body').height() 吗？否则，您可能会在 iframe 中运行某些东西（某种类型的 javascript），它会以某个间隔发布内部高度，并且外部代码可以响应。 postMessage 或直接访问就可以了。

标签： javascript jquery html iframe

【解决方案1】：

如果您需要移动支持并允许（用户）滚动 iframe，请查看 https://github.com/davidjbradshaw/iframe-resizer 作为解决 iOS 和 android 上不同问题的解决方案。

我还必须支持移动设备，经过几个小时的研究和测试后最终使用它。我还使用提供的消息通道向内部文档来回发送消息。

【讨论】：

【解决方案2】：

html修改后直接调用该函数

      function resizeIframe() {
          var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
          document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
      }

【讨论】：

感谢您的回复。我现在就试试这个。我会告诉你进展如何。
@three3 我忘了输入实际功能。我刚刚添加了它。确保你有那个。
谢谢，刚刚注意到。我现在正在添加。为了清楚起见，我是否将 parent.resizeIframe(document.body.scrollHeight); 添加到 iFrame 的 onload 属性中？
@three3 不，你把它放在 iframe 内实际页面的 onload 中。这就是为什么它打电话给父母。除非在加载页面之前更改了内容，否则您将无法在 onload 中使用它。我建议将parent.resizeIframe(document.body.scrollHeight); 放在一个函数中，并在您的 jquery 脚本运行时调用它。
我已经用新的 iFrame HTML 更新了我的原始帖子。它是否正确？如果是这样，它对我不起作用。高度没有调整。我有一种感觉，我在这里做错了什么。任何额外的帮助表示赞赏！