滚动视图中的 WKWebView

Posted 2023-02-23

【中文标题】滚动视图中的 WKWebView

【英文标题】：WKWebView inside Scroll View

【发布时间】：2019-01-19 18:47:19

【问题描述】：

考虑到在 Web View 之后我必须有其他元素，我如何将 WKWebView 放在 Scroll View 中。

. View ... Scroll View ....... ImageView ....... WKWebView ....... Button

See the demo image

问题 1：禁用 WKWebView 的滚动 问题 2：为 WKWebView 设置完整内容高度

查看我的sample project

【问题讨论】：

查看此问题以禁用滚动：***.com/questions/28631317/…

我没看懂with elements after Web View的部分。你能说得清楚一点吗？

请阅读此内容，然后编辑您的问题：***.com/help/mcve 您应该让人们尽可能轻松地帮助您。

@Mosbah 我已经尝试过了，但是滚动被锁定在 WBWebView 并且没有填满其内容的全部高度

@Glenn 我已经更新了问题文本，抱歉

【参考方案1】：

如果您的意思是在 WKWebView 中获取 html 的内容高度以使其在 UIScrollView 中不可滚动，请继续阅读。

您需要（通过委托）观察 webView 的内容高度。我给你这些步骤，因为你很清楚自己在做什么，而且你快到了。

摆脱 webView 高度限制

@IBOutlet weak var constraint_WebViewHeight: NSLayoutConstraint!

订阅 webView 的委托

这会让你知道（当你的 webView 完成加载你的网站内容时你的控制器。

self.webView.navigationDelegate = self

符合协议

在WKNavigationDelegate 的didFinish navigation 方法中，您可以调整webView 高度约束的常数。如果你愿意，可以放一些动画:)

extension ViewController: WKNavigationDelegate 
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) 
            self.constraint_WebViewHeight.constant = webView.scrollView.contentSize.height
        
    

最后，修正你的约束。

一个。删除您的 imageView 底部约束。 湾。将底部约束添加到滚动视图的保存按钮。

这将使您的 scrollView 可滚动。

瞧！这会产生这个结果。

我希望这会有所帮助！

【讨论】：

真的解决了问题，太感谢了。。谢谢！

如果您尝试加载包含大量图像的页面，应用程序将因内存影响而崩溃

我无法达到约束 WebViewHeight 的值。我按照教程进行操作，但仍有一些问题。也许是观点的限制？谢谢

你无法“达到价值”是什么意思？ @papesky？

我的意思是 constraint_WebViewHeight 为空，我不知道是否必须将 IBOutlet 链接到同一个 webView 或什么... :(

【参考方案2】：

根据您的理解，如果页面大于您的屏幕，您希望 webview 不能很好地滚动，它会滚动吗？ 显示整页。尽管您可以使用滚动视图的对象从界面构建器或代码中将 isscrollingenabled 更改为 false。 要设置全高，请从四面八方给出约束 0,0,0,0，它肯定会延伸到整个屏幕

【讨论】：

现在 WKWebView 的滚动保持锁定，但 WKWebView 的高度保持固定...我已将更改推送到 Github 中的项目

@AlanBarboza 我将在 1 分钟内发布我的答案。

那是一分钟

【参考方案3】：

这是错误的方法。 你应该使用 WKWebView 的 scrollView。

您需要使用 javascript 为带有 h​​tml 边距的图像和按钮预留空间

[NSString stringWithFormat:@"document.body.style.margin = '%dpx %dpx %dpx %dpx'", (int)margins.top, (int)margins.right, (int)margins.bottom, (int)margins.left]

如果您可以访问它，或者直接在 html 正文中。

在 WKWebView 的 scrollView 中添加 imageview 和 button。

【讨论】：

无论如何都没有好的解决方案，但这对于自动布局根本不起作用，例如就我而言，我不知道这些边距。

@Injectios 您可以使用 KVO 观察帧并在更改时更新边距

是的，谢谢，这就是我正在做的事情，但是这不是很可靠的事情，因为它真的取决于那里的 HTML。我觉得我一直在努力让两个不同的生态系统完美地协同工作 xd。遗憾的是，ATM 是不可能的。

@Injectios <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'> 使两个生态系统友好