Phonegap HTML5 / Android App - Iframe height issue

Question

We have built a HTML5 app which dynamically loads an iFrame to display external content. This solution worked fine until the release of android 4.0 - which seems to have changed the way that iframe rendering works?

It appears it can no longer detect the height, it shows a small scrollable box containing roughly 50px height of a 900px tall page. I have tried setting height to 100% - which works visually - but the app gets strange click results on anything beneath the page fold!

It works fine if I manually set heights for each frame - but due to the dynamic content this is very impractical.. Also as the app has a certain level of internal nav within the iframe - the sub pages can be a separate height to the original iframe height - again this did work fine in previous versions of Android.

Does anybody have any advice/explanations?

Answer 1

Just in case you're still stuck, I've just found this workaround...

<iframe src='externalcontent.htm' width='100%' scrolling='no' frameBorder='0' id='theiFrame' onLoad='fixiFrame();'></iframe>

function fixiFrame () {
   if ((android) && (androidVersion > 3)) {
      iFrameContentHeight = document.getElementById('theiFrame').contentDocument.body.offsetHeight;
      document.getElementById('theiFrame').style.height = iFrameContentHeight + 'px';
   }
}

Answer 2

This works for Android 4 and 5:

document.getElementById('theIframe').style.height = document.getElementById('theParent').offsetHeight + 'px';

Don't forget the '+px'