android iFrame 不滚动：在保持移动兼容性的同时，将我们的“小部件”包含在客户端网页上的做法是啥

Posted 2023-03-13

【中文标题】android iFrame 不滚动：在保持移动兼容性的同时，将我们的“小部件”包含在客户端网页上的做法是啥

【英文标题】：android iFrame not scrolling: what are practices to include our "widget" on client's Web pages while maintaining mobile compatibilityandroid iFrame 不滚动：在保持移动兼容性的同时，将我们的“小部件”包含在客户端网页上的做法是什么

【发布时间】：2011-12-11 04:59:28

【问题描述】：

我们开发了一个 SAAS 预订应用程序。

作为这项服务的一部分，我们为客户提供了一个“小部件”，可以嵌入到他们现有的网页中，以便客户进行预订。

我们已将此小部件实现为一个简单的 iframe，到目前为止它一直运行良好。 iFrame 似乎是一个很好的解决方案，适用于桌面浏览器、ios 设备和一些 android 手机，但我们收到报告称，在一些 Android 设备上 iFrame 无法滚动并导致用户出现问题。

我们希望尽可能跨设备兼容，因此我们开始思考，我们这样做是否正确...

我的问题是，iFrame 是否适合将这样的小部件包含到另一个站点中？或者，有没有更好的方法来达到同样的效果。

我的研究表明，Youtube、Facebook 等似乎使用 iFrame 来实现此类功能。

也许 iFrame 是实现这一点的最佳方式，而那些使用旧版 Android 设备的用户将不得不接受不太完美的体验，或者也许我们有更好的方法来解决这个问题。

感谢您的任何想法！

这是 iframe：

<iframe src="http://salontastic.salonmonster.com/client/index.php?layout=2"  min- style="min-height:600px;" scrolling="auto" frameborder="0"></iframe>

我创建了一个 jsfiddle 来演示它。

http://jsfiddle.net/6htuz/

【参考方案1】：

我不同意...我也是一名开发人员，我在使用 Android 上的 iFrame 时遇到了很多问题...目前，我正在使用带有 Android 2.2 的 Toshiba Folio 100 进行测试。 5 股票浏览器和 iFrame 上的滚动不起作用。 我试过那个jsfiddle，我也不能滚动它！ 有没有人可以解决这个问题？我花了几天时间在谷歌上搜索并尝试了一千种不同的技巧，但在股票浏览器和 Dolphin HD 上都没有运气。在 Opera Mobile 和 Firefox mobile 中，它们开箱即用，但我需要保证即使使用普通浏览器也能完全支持 Android :-(

【讨论】：

感谢您的反馈 lucaferrario。听到 iframe 不能在 Android 2.2.5 上滚动，这可不好。我们也确实需要能够保证对 android 的支持，所以这对我们来说是一个明确的问题！

嗯...在我的网站上，我放弃了对 Android 2.2 的支持，因为无法在 iFrame 内滚动（我已经尝试了一切，包括一些 javascript 库，如 iScroll）...相反，在 Android >= 3.0 中，滚动 iFrame 可以开箱即用，不需要任何库。我还没有测试 2.3 Gingerbread……你对此有什么反馈吗？

[OFF TOPIC] 对这个话题感兴趣的人肯定也会对此感兴趣，让 iOS 中的 iFrame 体验更好（它只适用于 iOS，它并不能以任何方式解决 Android问题）：Native momentum scrolling in iOS 5 [/OFF TOPIC]

【参考方案2】：

如果 iframe 的子页面为 10,000 像素高（即非常高），并且您希望将其嵌入到移动网页中，以便可以滚动所有 10,000 像素的内容，那么解决方案是制作 iframe 本身10,000 像素高：

iframe 的内容不会滚动，但它的包含窗口会滚动。

不能完全解决滚动问题，但允许滚动长 iframe 内容。