一.关于UIWebView 与 WKWebView 选取问题
从发布时间看:javascript
2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有UIWebView了。css
WKWebView是IOS 8.0推出,2014年9月份。新出的WKWebView是对老UIWebView的优化与升级。html
WKWebView对比UIWebView主要优点:java
- 更多的支持HTML5的特性
- 增长了加载进度属性:estimatedProgress
- 耗内存小,网页加载速度也有小幅度提高
- 功能细分,更具体明确
可是考虑到IOS8.0,UIWebView具备更强的兼容性。加上需求是加载一个HTMLStr+原生控件,要求不高,这里选用UIWebView。web
二.踩坑
坑1:htmlStr没有正确拼接头
NSString *strHTML = _textDic[@"content"]; NSString *str = [NSString stringWithFormat:@"<html> \n" "<head> \n" "<style type=\"text/css\"> \n" "body {font-size:15px;}\n" "</style> \n" "</head> \n" "<body>" "<script type='text/javascript'>" "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" "}" "</script>%@" "</body>" "</html>",strHTML]; [self.webView loadHTMLString:str baseURL:nil];
头部要这样拼全,若是只拼width为屏幕宽,图片适配会出问题,致使计算UIWebView的内容实际高度会出现偏差,下面有留白。缓存
重点是设置图片宽: " $img[p].style.width = '100%%';\n" 即100%,宽为屏幕宽。cookie
设置图片高:"$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,选择比较靠谱的两种方法推荐。lua
方法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