WKWebView加载HTML字符串获取高度渲染高度

发表于 2017-05-18 分类于 Mobile

这篇文章算是个小记，可能只会暂时描述问题和解决问题方法，原理的方面之后具体写在Diary里面

具体的需求是这样子的，简书APP文章详情页面。。。应设计师要求我就不po图了，可以打开看一下简书APP。。。

大致就是这样子有一个下拉可以放大上划navigationBar淡出的交互的头图，下面接着是一个需要加载html字符串的WKWebView(这里为什么用WK,大家都知道UIWebView的内存损耗简直爆炸，而且我们的项目是适配iOS8以上，所以当然是最佳之选)，下面还要有一个UIT ableView来展示专题的评论，很像简书有木有。。。

我大致就是这样处理的，将WKWebView.scrollView的contentInset属性的top值设置为图片的高度，然后将图片视图加到WKWebView.scrollView上面，然后将整个一个WkWebView作为头视图加到UITableView上面，这样就不用处理因为多层scrollView嵌套而带来的手势冲突。

下面讲讲`WKWebView`的处理

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 14.0px 'Helvetica Neue'}span.s1 {font: 13.0px 'Helvetica Neue'}span.s2 {color: #00a2ff}

<p>
 <p class="MsoNormal" align="center" style="text-align:center;">
  <br />
 </p >
 <p class="MsoNormal" align="center" style="text-align:center;">
  各位小伙伴们，大家都听说过创新工场这家机构吗？在创投圈，创新工场应该是耳熟能详的一个名字了。创新工场是一家早期投资机构投资机构。所谓投资机构，全称风险投资机构（VC），风险投资机构是风险投资最直接的参与者和实际操作者，同时也最直接地承受风险、分享收益。简单来说就是会为创业者提供融资的来源之一。
 </p >
 <p class="MsoNormal" align="center" style="text-align:center;">
  < img width="1920" height="480" src="http://oli02rut3.bkt.clouddn.com/201702171256554KSruA0R.jpg" alt="" title="" align="" />
 </p >
 <p class="MsoNormal">
  &nbsp;
 </p >
 <p class="MsoNormal">
  如果没听说过创新工场这个名字的话，那么李开复这个名字应该听说过吧，李开复就是创新工场的创始人了。如果你连李开复都没有听说过的话，那么你肯定用过知乎吧，就算你没用过，你也应该听说过知乎吧，知乎是创新工场投过的一个成功的投资案例了。
 </p >
</p >

以上就是后台传过来的数据，看到这个得我是这样的

让我加载个这东西？
果然，第一个出问题的是图片，这个图片让我想起了iPhone20

废话不多说，我将HTML代码处理的一下，结果是这样的

1	let html = "<div id = \"content\"><style type=\"text/css\">img{width : 100% ; height : auto; display: block;}</style>\(result)</div>"

首先先用一个div将其包起来，起一个自己比较喜欢的id
里面写一个样式让图片自适应屏幕宽的100%(加载出来不是iPhone的屏宽，左右有一点留白)，高度根据原有的长宽比会自适应，高高兴兴的加载了出来发现图片正常了，但因为我们的html字符串加载不满一屏下面有一大片留白，如果运营M(zu)M(zong)那天不想写，直接一个图几句话我下面一大片空白就醉了，首先我们需要写一点js获取一下加载后的高度，直接上代码

1 2	//需要设置代理处理webView加载完成之后的状态 webView.navigationDelegate = self

extension SubjectDetailViewController : WKNavigationDelegate{
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.getElementById(\"content\").offsetHeight;") { (result, error) in
            if let webViewHeight = result as? CGFloat{
                var frame = webView.frame
                let height = webViewHeight / 3 + UIScreen.screenWidth() * 38 / 75
                frame.size.height = height
                if height > UIScreen.screenHeight() - 49{
                    webView.scrollView.isScrollEnabled = true
                }else{
                    webView.frame = frame
                }
            }
        }
    }
}

首先是这段"document.getElementById(\"content\").offsetHeight;")，获取的是content标签中代码加载后的滚动范围，在执行后返回的高度的单位不知道是什么，5s中半屏的区域返回了1000左右，可能是px，经过多次尝试之后发现返回的高度和苹果的pt是1:3的关系

之后的判断是高度是否大于屏高减去tabbar的高度，也就是屏幕的最大显示范围，大于的时候开启WKWebView.scrollView的滑动功能，当小于的时候也就是不满一屏，直接重置webView的frame.size.height并关闭滑动手势，这样一来下面的留白就没有了，就像是简书APP的文章详情一样，但是在webView超过一屏的时候，从webView到评论列表会有一个手势转化上的卡顿，几乎没有对用户造成影响

Wong's Blog

WKWebView加载HTML字符串获取高度渲染高度

这篇文章算是个小记，可能只会暂时描述问题和解决问题方法，原理的方面之后具体写在Diary里面

具体的需求是这样子的，简书APP文章详情页面。。。应设计师要求我就不po图了，可以打开看一下简书APP。。。

下面讲讲`WKWebView`的处理

这是我遇到这个问题处理的方法，如果有更好的方法希望可以互相交流一下，希望这个思路可以帮到大家

这篇文章算是个小记，可能只会暂时描述问题和解决问题方法，原理的方面之后具体写在Diary里面

具体的需求是这样子的，简书APP文章详情页面。。。应设计师要求我就不po图了，可以打开看一下简书APP。。。

下面讲讲WKWebView的处理

这是我遇到这个问题处理的方法，如果有更好的方法希望可以互相交流一下，希望这个思路可以帮到大家

下面讲讲`WKWebView`的处理