WKWebView高度计算

近期有一个需求需要在View的某一个区域插入一段H5的内容,这段内容是服务端下发的,相信很多同僚都做过类似的需求,现在就把本人做这个需求的经历记录下来,希望对大家有所帮助。

这个需求的难点是下发的H5内容高度是变化的,根据服务端下发内容的不同,WebView会有不同的高度。所以关键点也是在拿到服务端内容进行WebView加载完成之后,计算出WebView的高度,并且设置为对应的值即可。

在网上找了很多资料,大多数的都是如下的方式,在 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) 代理方法中添加如下代码

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
 webView.evaluateJavaScript("document.body.offsetHeight") { result, _ in
 if let height = result as? CGFloat {
 var frame = webView.frame
 frame.size.height = height
 webView.frame = frame
 }
 }
}

上面的方式在大多数的时候是有效正确的,但我遇到了一些情况还是计算的有问题。经过不断的查阅资料,还是找到了一个更准确的计算方式,方式基本和上面是一样的,调用的JS不一样,使用 document.documentElement.offsetHeight,代码如下

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
 webView.evaluateJavaScript("document.documentElement.offsetHeight") { result, _ in
 if let height = result as? CGFloat {
 var frame = webView.frame
 frame.size.height = height
 webView.frame = frame
 }
 }
}

至于原因,大致可以如下理解:document.documentElement.offsetHeight >= document.body.offsetHeight,具体详情可以参考 这里,这里描述了 offsetHeight 在各个节点及各个浏览器的一些差异。

还有一点要注意:初始化webView的时候,高度要设置为0,宽度需要设置成需要的宽度

作者:coder_zz

%s 个评论

要回复文章请先登录注册