一.關於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:@"<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%，寬為屏幕寬。
設置圖片高："$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的寬度