一.关于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" 
 
"
"body {font-size:15px;}\n"
" \n"
" \n"
"
" 
 
"
"window.onload = function(){\n"
"var $img = document.getElementsByTagName('img');\n"
"for(var p in $img){\n"
"$img[p].style.width = '100%%';\n"
"$img[p].style.height ='auto'\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根本原因,多去尝试,离真相就不远了。