WKWebView高度计算的奥秘：从理论到实践

2024-01-24 14:31:43

导言

在iOS开发中，WKWebView是用于在应用程序中显示网页内容的重要控件。与传统的UIWebView相比，WKWebView具有性能更优、内存消耗更低等优点，因此得到了广泛应用。然而，在实际开发过程中，开发者经常会遇到WKWebView高度计算的问题，影响应用程序的视觉效果和用户体验。

document.body.offsetHeight方法的局限性

在大多数情况下，开发者可以使用document.body.offsetHeight方法获取WKWebView的高度。该方法通过测量文档主体的实际高度来计算WebView的高度。然而，在某些情况下，此方法可能无法准确获取高度，主要原因如下：

隐藏的滚动条： 当WebView的滚动条被隐藏时，document.body.offsetHeight将不包含滚动条的高度，导致计算结果不准确。
固定定位元素： 如果WebView中包含使用position: fixed属性的元素，这些元素将不会影响document.body.offsetHeight，导致计算结果与实际高度不一致。
异步加载内容： 如果WebView中包含异步加载的内容（如图像或视频），在内容加载完成之前，document.body.offsetHeight可能无法准确反映WebView的最终高度。

通用高度计算方法

为了克服document.body.offsetHeight方法的局限性，我们需要采用一种更可靠且通用的高度计算方法。以下是步骤：

计算内容高度： 使用JavaScript计算WebView中内容的高度，包括文档主体的高度以及任何固定定位元素的高度。
检查滚动条： 检查WebView的滚动条是否可见。如果可见，则需要将滚动条的高度添加到计算出的内容高度中。
调整WebView高度： 根据计算出的总高度调整WKWebView的高度。

下面提供一个示例代码段，展示了如何使用此方法计算WKWebView高度：

func calculateWKWebViewHeight(webView: WKWebView) -> CGFloat {
    // 计算内容高度
    let contentHeight = webView.evaluateJavaScript("document.documentElement.scrollHeight") as! CGFloat

    // 检查滚动条是否可见
    let isScrollbarVisible = webView.evaluateJavaScript("document.body.scrollHeight > document.documentElement.clientHeight") as! Bool

    // 如果滚动条可见，则添加滚动条高度
    let totalHeight = isScrollbarVisible ? contentHeight + webView.scrollView.verticalScrollIndicatorInsets.top + webView.scrollView.verticalScrollIndicatorInsets.bottom : contentHeight

    // 调整WebView高度
    webView.frame.size.height = totalHeight

    return totalHeight
}