Adjust Height Of Iframe When New Content Is Loaded

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 int

Solution 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.

• how to properly display an iFrame in mobile safari
• 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.

Solution 2:

Call this function directly after the html has been changed.

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