Question

我有一个iFrame，它包含在我的HTML中，并在页面加载时可用。首次加载页面时，iFrame没有内容/ src。我正在使用jQuery动态地将内容插入到iFrame中。当用户点击我页面上的链接时，iFrame的内容会更新。所有这些对我都有用。但是，当加载新内容时，我正在努力调整iFrame的高度。我在StackOverflow上尝试了几种解决方案但没有成功。这是我的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>

Answer 1

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

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

Answer 2

更改html后直接调用此函数。

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

加载新内容时调整iFrame的高度

2 个答案: