PhoneGap的HTML5 / Android应用程序 - Iframe的身高问题 [英] Phonegap HTML5 / Android App - Iframe height issue

问题描述

我们已经建立了一个HTML5的应用程序，它动态加载一个iFrame显示外部内容。该解决方案精细的工作，直到Android的4.0版本 - 这似乎已经改变了IFrame显示的工作方式

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?

似乎它不再能够检测到的高度，它显示了一个包含900px高大页​​的大致50像素高度的小滚动的框。我曾尝试设置高度为100％ - 这在视觉上工作 - 但应用程序变得陌生点击结果上的任何页面下方折

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!

它工作正常，如果我手动设置高度为每帧 - 但由于动态内容，这是非常不切实际的。也为应用程序具有的iframe的内部资产净值的一定水平 - 子页面可以是一个单独的高度原来的iframe的高度 - 这又确实在Android中的previous版本，做工精细

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?

推荐答案

以防万一你仍然坚持，我刚刚发现了这个解决办法...

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';
   }
}

这篇关于PhoneGap的HTML5 / Android应用程序 - Iframe的身高问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！