ios UIWebView加載HTMLStr圖文，關於圖片寬高設置，webView內容實際高度的踩坑問題

時間 2019-11-16

標籤 ios uiwebview 加載 htmlstr 圖文關於圖片設置 webview 內容實際高度問題欄目 iOS 简体版

原文原文鏈接

一.關於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，也能適配。post

坑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的寬度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。