确定WKWebView的内容大小

本文最初发表在我的个人博客上。 我强烈建议在此处阅读该书，因为它可以更好地突出显示语法并提供阅读相关文章的建议。

在我最近的一个项目中，我不得不使用Web视图来显示带有本地CSS和自定义字体的HTML字符串。 Web视图必须与其他几个视图一起嵌入滚动视图中。 还必须将其高度调整为要显示的内容。 我的目标是创建以下内容：

我已经在以前的一个项目中做到了这一点，所以我想我会重用相同的代码。
问题在于代码使用的是UIWebView而不是较新的WKWebView 。 从iOS 8开始， UIWebView被功能更强大且结构更完善的WKWebView ，并且从iOS 12开始正式弃用UIWebView 。 这意味着我不得不重新实现该功能。
我已将所有代码放在GitHub上的示例项目中，以便您可以继续。

为了将HTML字符串加载到Web视图中， WKWebView具有loadHTMLString(_:baseURL:)方法。 我从后端获取的HTML字符串没有 ， 和标记，因此我不得不手动添加它们。 加载HTML的方法如下所示：

重要笔记：

1. 标签必须具有viewport元数据，这对于正确计算Web视图的内容高度非常重要。
2. baseURL中的baseURL参数必须是主要的捆绑包URL，因为我们将加载本地自定义字体。

在UIWebView本地CSS文件加载到HTML中非常容易。 您只需要在标记中添加 。
在WKWebView此过程有点复杂，因为它要求在HTML加载后注入CSS。 我们可以通过webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)的webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)方法来WKNavigationDelegate这WKNavigationDelegate ：

首先，我们将style.css文件的内容加载到字符串变量中。 之后，我们使用JavaScript将标记注入Web视图的HTML。
这种方法的问题在于，Web视图将加载HTML并显示它，然后再应用CSS。 用户看不到该过渡，这是不好的。

幸运的是，有更好的方法。 我们可以使用WKUserScript来表示可以注入到网页中的脚本， WKUserContentController可以将脚本注入到Web视图中。 在WKWebView初始化期间，将在WKWebView内部使用这些对象：

使用这种方法，CSS将在HTML加载后立即加载，并且不会出现用户可以注意到的过渡。

要在Xcode中添加自定义字体，建议您遵循Apple的教程。 添加字体后，我们需要使用CSS将其加载到Web视图中。 要在CSS中使用自定义字体，我们需要使用@font-face CSS规则：

这样，我们定义了自定义字体，现在可以在CSS中使用它：

在网络视图中加载HTML和CSS之后，我们必须计算其高度。 为了计算高度，我们将使用JavaScript在网络视图中找到文档的scrollHeight 。 我们将在委托方法中执行此操作，以确保Web视图在计算之前完成加载：

在此博客文章中，我们介绍了WKWebView一个用例，并分析了可能发生的问题。 我们可以看到，与过时的UIWebView相比，新的API为我们提供了更多的灵活性和稳定性。

---

本文最初发表在我的个人博客上。