更改 iframe src 会中断 Android Phonegap 应用程序中的滚动答案

【问题标题】：Changing iframe src breaks scrolling in Android Phonegap application更改 iframe src 会中断 Android Phonegap 应用程序中的滚动
【发布时间】：2013-12-03 00:00:12
【问题描述】：

我有一个有趣的错误，适用于 Android 中的 Phonegap 应用程序。我首先注意到滚动在模拟器或某些特定设备上不起作用（它在我的手机上工作，至于平台 2.3）并尝试了每一个建议来解决这个问题，包括 SO 建议中的多个； 1、原生端修复 2、添加iScroll库。然而，没有一个解决方案奏效。此外，不可用的滚动只影响特定页面，而不是整个应用程序。

我已将问题缩小到这行代码，它替换了 iframe 的 src 属性。它旨在显示通过外部内容 api 获取 url 的 youtube 视频的缩略图。

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

和 iFrame 标记

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

我已经尝试在标记中对 url 进行硬编码，效果很好，这是因为替换 iframe 的源代码会破坏页面滚动。

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

提前感谢您的帮助。

*编辑：似乎与视口有关，因为删除标签会阻止任何破坏滚动的东西。

【问题讨论】：

删除什么标签修复它？我自己似乎有一些与 iframe 相关的问题。我在 iPad 上，这很奇怪。两指滚动的作品，但不是很好。我正在尝试在 iframe 中显示文件，例如 PDF。你有没有得到这个工作？

标签： android iframe cordova

【解决方案1】：

我在使用 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 的来源发生变化，它就会根据该内容调整高度，并且应该可以解决您的滚动问题。

【讨论】：