更改iframe src会破坏Android Phonegap应用程序中的滚动

时间:2012-09-03 16:48:16

标签: android iframe cordova

我在android中的Phonegap应用程序中有一个有趣的错误。我首先注意到滚动不能在模拟器中工作,或者在某些特定设备上工作(它在我的手机上工作,它是平台2.3)并且尝试了每个建议来解决这个问题,其中包括多个这样的SO建议; 1,本机端修复和2,添加iScroll库。但是,没有一种解决方案有效。此外,不可用的滚动仅影响特定页面,而不影响整个应用程序。

我已经将问题缩小到这行代码,它取代了iframe的src属性。它旨在显示YouTube视频的缩略图,其中的网址是通过外部内容API获取的。

$('#video').attr('src', newUrl);

和iFrame标记

<iframe class="youtube-player" id="video" type="text/html" src="js/views/loading.html" frameborder="0"></iframe>

我已经尝试在标记中对网址进行硬编码,并且它工作正常,这是替换iframe的源来打破页面滚动的行为。

我正在唱Phonegap / Cordova 1.8.1,最低目标android平台是2.2

提前感谢您的帮助。

*编辑:似乎与视口有关,因为删除标记会阻止任何打破滚动的内容。

1 个答案:

答案 0 :(得分:0)

我在使用PhoneGap创建的Android应用程序时遇到了类似的问题。我遇到的问题是,当iframe中的数据发生变化时,可滚动空间的数量也会发生变化,因此有些页面会滚动得太远而有些页面不够。

为了解决此问题,您必须使用一些JavaScript根据内容加载时的内容调整iframe的高度。

我从这个问题找到了答案:Phonegap HTML5 / Android App - Iframe height issue

该问题的答案建议使用iframe上的onload属性来调用javascript函数,该函数调整iframe的高度以匹配内容。

javascript本身看起来像这样:其中obj是传递给函数的iframe元素。

function resizeIFrame(obj){
     obj.style.height = obj.contentWindow.document.body.offsetHeight + "px";
}

现在,只要iframe的来源发生变化,它就会根据该内容调整高度,并应修复滚动问题。