最近在開發(fā)過程中用到了webView加載HTML字符串的方式以下簡單介紹下UIWebView加載HTML的三種常用的方式。而我主要應(yīng)用的是第三種方法猜扮。
UIWebView加載HTML的格式及方法：
1）加載網(wǎng)頁：
- (void)loadWebPage {
NSURL *url = [NSURL urlWithString:@"https://www.baidu.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_webView loadRequest:request];
}
2)加載本地HTML文件
- (void)loadLocalFile {
NSURL *url = [[NSBundle mainBundle] urlForResource:@"localHtml.html" withExtension:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_webView loadRequest:request];
}
3)加載HTML字符串
- (void)loadHtmlString {
[_webView loadHTMLString:@"<p>這是一個段落</p>" baseURL:nil];
}
服務(wù)端返回的數(shù)據(jù)格式是以下樣式：
現(xiàn)要將name和create_time拼接到content里面，一起顯示出來：
其中谭梗，SXDetails.css是自己寫的name與time的樣式：
拼接完成之后忘晤，調(diào)用上面的第三個方法，就可以實現(xiàn)帶有title和time還有content的html頁面了激捏。
關(guān)于實現(xiàn)方式设塔，主要感謝仿網(wǎng)易的圖文混排這篇文章提供的思路，以及GitHub上的代碼远舅。
使用webView加載html字符串的時候闰蛔，可能會出現(xiàn)html不自適應(yīng)手機屏幕寬的情況。然后查看webView的官方文檔表谊，發(fā)現(xiàn)UIWebView有一個屬性：[webview setScalesPageToFit:YES];設(shè)置之后HTML確實不需要左右滑動了钞护，但是整體字體會變小，并且右邊會多出來一條空白條爆办，看起來很丑难咕！
后在網(wǎng)上搜索,發(fā)現(xiàn)可以通過以下幾種方案在UIWebView中修改html使其達到我們想要的效果
1.嵌套js修改方案1 來設(shè)置，不過這種方法距辆，需要你有一定的js功底余佃，本人js很爛，so這種方式我就沒有選擇跨算；
2.通過自定義CSS樣式方案2爆土，設(shè)置你需要自適應(yīng)的類選擇器(如p，div诸蚕， table等等)來設(shè)置步势，而且這篇文章中詳細的解釋了viewport，很??背犯。
我的問題由第2種方案解決的坏瘩，在自定義的CSS文件中加入兩行代碼
p{max-width:100%;height:auto}
div{max-width:100%}
保存，運行漠魏，完美適配倔矾。
20190415更新
針對有些字符串計算高度不正確進行了處理。
1.在- (NSString *)getHtmlString方法里面的body里面添加如下代碼：
[html appendString:@"<body style=\"background:#f6f6f6\">"];
/// 以下為新代碼---start
[html appendString:@"<div id=\"height\">"];
[html appendString:[self getBodyString]];
[html appendString:@"</div>"];
/// 以上為新代碼---end
[html appendString:@"</body>"];
另外在- (void)webViewDidFinishLoad:(UIWebView*)webView方法里面獲取_webViewHeight方法變成了
CGFloat _webViewHeight = [[_outPrepareWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"height\").scrollHeight;"]floatValue];
保存柱锹，運行~
