iOS：带有 iframe 的页面不会在 WKWebView 中滚动答案

【问题标题】：iOS: Page with iframe does not scroll in WKWebViewiOS：带有 iframe 的页面不会在 WKWebView 中滚动
【发布时间】：2020-01-05 00:20:09
【问题描述】：

在我的应用程序中，我使用WKWebView 组件显示网站，但由于该网站具有<iframe> 内容，因此滚动不起作用。 iframe 内容本身会记录点击和滑动，但它从不滚动。

当我用 Safari 打开同一个页面时，它运行良好，我可以与 iframe 的内容进行交互并毫无问题地滚动。

我的 iframe 采用网页的全宽和全高，我添加了这个属性：

-webkit-overflow-scrolling: touch;

但这无济于事。不幸的是，我无法显示有问题的网页，因为它包含专有数据并且正在登录屏幕。

我宁愿在不修改网页的情况下解决这个问题，因为 Safari 可以正常工作。

编辑：看起来iframe 可能正在检测事件而不是“转发”它们，因为当页面上还有例如导航栏时（这不是iframe 的一部分）我可以刷它和滚动。但是，由于屏幕上的空间非常小，我不希望除了 iframe 本身之外没有任何其他元素。

编辑 2：我试图直接在 WKWebView 中显示来自 iframe 的页面，但它仍然根本不滚动。在 Safari 中运行良好。

解决方案：最后，我通过更改 WKWebView 的 userAgent 属性以根据设备匹配适用于 iPhone 或 iPad 的 iOS 12 Safari，从而解决了这个问题。有问题的网站在用户交互方面相当复杂，所以我猜他们使用默认用户代理向浏览器发送“不正确”的设置。

【问题讨论】：

【解决方案1】：

我会寻找可能有条件加载的滚动阻塞事件侦听器。如果您有某种触摸、触摸移动、单击、悬停 javascript 事件，它们可能会使用 e.preventDefault() 干扰默认逻辑。

您还需要在框架页面和主机页面中查找此类事件。

尝试替换主机页面和框架页面以查看滚动是否适用于不同的 URL。

【讨论】：

谢谢，这是我还没有尝试过的东西。 iframe 本身的内容我无法控制，但我想我可以从应用程序中注入 JS。您对如何找到此类事件侦听器有任何提示吗？
最简单的方法是尝试在 iframe 中加载一个完全不同的页面，该页面没有 javascript 并查看它是否滚动良好。至于您拥有的主机页面 - 只需手动检查资源，或尝试不同的主机页面。我会更新答案。
是的，我尝试了其他页面并且它们滚动正常，我还尝试仅加载 iframe 的源 URL（因此我的页面甚至没有加载），它也不起作用。
你不能在不属于你的页面中注入 JS。
同时尝试在你的 WebView 中模拟 Safari 用户代理，这样目标页面就会认为它是在 Safari 中加载的。

【解决方案2】：

尝试将iframe 与-webkit-overflow-scrolling 放在div 中，这将占据整个视图并使iframe 成为其内容的大小。

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>

您可能需要通过调整 iframe 的大小以匹配其内容来获得创意（请参阅：Adjust width and height of iframe to fit with content in it）

【讨论】：