ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题...

一.关于UIWebView 与 WKWebView 选取问题

从发布时间看：

2008年7月11日，在新一代iPhone3G正式发售当天，iPhone OS 2.0（iOS 2.0）推出，这时候就有UIWebView了。

WKWebView是IOS 8.0推出，2014年9月份。新出的WKWebView是对老UIWebView的优化与升级。

WKWebView对比UIWebView主要优势：

• 更多的支持HTML5的特性
• 增加了加载进度属性：estimatedProgress
• 耗内存小，网页加载速度也有小幅度提升
• 功能细分，更具体明确

但是考虑到IOS8.0，UIWebView具有更强的兼容性。加上需求是加载一个HTMLStr+原生控件，要求不高，这里选用UIWebView。

二.踩坑

坑1：htmlStr没有正确拼接头

NSString *strHTML = _textDic[@"content"];
    NSString *str = [NSString stringWithFormat:@" \n"
                       " \n"
                       " \n"
                       " \n"
                       ""
                       "%@"
                       ""
                       "",strHTML];
    [self.webView loadHTMLString:str baseURL:nil];

头部要这样拼全，如果只拼width为屏幕宽，图片适配会出问题，导致计算UIWebView的内容实际高度会出现误差，下面有留白。

重点是设置图片宽： " $img[p].style.width = '100%%';\n" 即100%，宽为屏幕宽。

设置图片高："$img[p].style.height ='auto'\n" 即auto，高度自适应，

当然，如果固定后台上传图片的宽高，手动计算设置width，height，也能适配。

坑2：计算UIWebView实际内容高度不准确

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    webView.scrollView.scrollEnabled = NO;
    webView.scrollView.showsVerticalScrollIndicator = NO;
    webView.scrollView.showsHorizontalScrollIndicator = NO;

    //方法1
//        NSString *htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"];
//        NSString *htmlWidth = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth"];
//        float i = [htmlWidth floatValue]/[htmlHeight floatValue];
//        float height = ScreenWidth/I;

//     方法2
    CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
    CGFloat height = fittingSize.height;
    _webView.frame = CGRectMake(0, 0, ScreenWidth, height);
}

网上有很多种计算UIWebView的方法，博主尝试过7种之多或大于7，选择比较靠谱的两种方法推荐。

方法1:通过计算HTML内容的宽高比结合屏幕宽，算出UIWebView的内容高度。

有个缺点，因为/，如果除不尽，所得到的高度有很小误差，如果设置UIWebView高度为计算高度，会偏小一丢丢。如果结合刷新上拉加载多次，巧合下UIWebView底部会出现一条黑线（看似黑线，其实是误差造成视觉差）

方法2：自动适应，不改变大小，算出最优宽高，得到的高会比实际高度大，这样不会出现黑线Bug，较好适配。

提一下 sizeToFit 和 sizeThatFits，很多初学者分不清这两者，可以这样理解。

控件sizeToFit后，自适应，会改变控件真实宽高，通常用于求宽。

而sizeThatFits，是算出控件的最优Size，不会改变控件。这个Size你要用来做什么，就是它存在的意义了。

坑3：如果项目需要多次上拉加载，下拉刷新新的HtmlStr，高度会出错

真凶是UIWebView会自动缓存，多次加载新HtmlStr，由于缓存，会导致高度为上次计算高度，造成不准确。

解决办法，在重新加载UIWebView时候，清除缓存。

   if (_webView) {
        _webView = nil;
        [self cleanCacheAndCookie];
    }
/**清除缓存和cookie*/
- (void)cleanCacheAndCookie{
    //清除cookies
    NSHTTPCookie *cookie;NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    for (cookie in [storage cookies]){[storage deleteCookie:cookie];}
    //清除UIWebView的缓存
    [[NSURLCache sharedURLCache] removeAllCachedResponses];
    NSURLCache * cache = [NSURLCache sharedURLCache];
    [cache removeAllCachedResponses];
    [cache setDiskCapacity:0];
    [cache setMemoryCapacity:0];
}

结语：
网上查了很多资料，看了很多人的博客，获益很多。
找出Bug根本原因，多去尝试，离真相就不远了。

借鉴博文：
1.iOS webview 清除缓存

2.iOS网络3—UIWebView与WKWebView使用详解

3.iOS 让HTML网页内容和图片自适应UIWebView的宽度

转载于:https://www.cnblogs.com/zhouDongdong/p/11202979.html