最近在開發過程中用到了webView加載HTML字符串的方式以下簡單介紹下UIWebView加載HTML的三種常用的方式。而我主要應用的是第三種方法。
UIWebView加載HTML的格式及方法：
1）加載網頁：
- (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];
}
服務端返回的數據格式是以下樣式：
現要將name和create_time拼接到content里面，一起顯示出來：
其中，SXDetails.css是自己寫的name與time的樣式：
拼接完成之后，調用上面的第三個方法，就可以實現帶有title和time還有content的html頁面了。
關于實現方式，主要感謝仿網易的圖文混排這篇文章提供的思路，以及GitHub上的代碼。
使用webView加載html字符串的時候，可能會出現html不自適應手機屏幕寬的情況。然后查看webView的官方文檔，發現UIWebView有一個屬性：[webview setScalesPageToFit:YES];設置之后HTML確實不需要左右滑動了，但是整體字體會變小，并且右邊會多出來一條空白條，看起來很丑！
后在網上搜索,發現可以通過以下幾種方案在UIWebView中修改html使其達到我們想要的效果
1.嵌套js修改方案1 來設置，不過這種方法，需要你有一定的js功底，本人js很爛，so這種方式我就沒有選擇；
2.通過自定義CSS樣式方案2，設置你需要自適應的類選擇器(如p，div， table等等)來設置，而且這篇文章中詳細的解釋了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];
保存，運行~
