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

I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me. However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on * but with no success. Here is my iFrame code:

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

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

&amp;lt;/ iframe&amp;gt;&amp;lt;/p&amp;gt;

Here is my jQuery that changes the HTML inside of my iFrame:

这是我的jQuery,它改变了我的iFrame里面的HTML:

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

This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.

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

Any help is appreciated!

任何帮助表示赞赏!

UPDATE:

Here is my new HTML:

这是我的新HTML:

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

2 个解决方案

#1

If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.

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

how to properly display an iFrame in mobile safari

如何在移动野生动物园中正确显示iFrame

https://encrypted.google.com/search?q=iframe+resize+ios+issue

I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.

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

#2

Call this function directly after the html has been changed.

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

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

#1