轉載
最近公司需求，需要加載HTML標籤，首選先來一段HTML標籤
<p><span style="color: rgb(51, 51, 51); font-family: arial, 宋體, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">培訓是給有經驗或無經驗的受訓者傳授其完成某種行爲必需的思維認知、基本知識和技能的過程。基於認知心理學理論可知，職場正確認知（內部</span><a target="_blank" href="https://baike.baidu.com/item/%E5%BF%83%E7%90%86" style="color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, 宋體, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);">心理</a><span style="color: rgb(51, 51, 51); font-family: arial, 宋體, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">過程的輸出）的傳遞效果纔是決定</span><a target="_blank" href="https://baike.baidu.com/item/%E5%9F%B9%E8%AE%AD" style="color: rgb(19, 110, 194); text-decoration-line: none; font-family: arial, 宋體, sans-serif; font-size: 14px; text-indent: 28px; white-space: normal; background-color: rgb(255, 255, 255);">培訓</a><span style="color: rgb(51, 51, 51); font-family: arial, 宋體, sans-serif; font-size: 14px; text-indent: 28px; background-color: rgb(255, 255, 255);">效果好壞的根本。</span></p>
這段標籤可以直接用WebView加載，如下
[self.webView loadHTMLString:pxfxjs_app baseURL:nil];
但是有一個問題，加載出了以後，在顯示時會發現文字特別小，而且WebView的滾動範圍會超過界面寬帶，如果有圖片，圖片寬帶也有可能會超過屏幕寬度，所以需要添加標籤適配，如下
//HTML適配圖片文字
- (NSString *)adaptWebViewForHtml:(NSString *) htmlStr
{
NSMutableString *headHtml = [[NSMutableString alloc] initWithCapacity:0];
[headHtml appendString : @"<html>" ];
[headHtml appendString : @"<head>" ];
[headHtml appendString : @"<meta charset=\"utf-8\">" ];
[headHtml appendString : @"<meta id=\"viewport\" name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=false\" />" ];
[headHtml appendString : @"<meta name=\"apple-mobile-web-app-capable\" content=\"yes\" />" ];
[headHtml appendString : @"<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\" />" ];
[headHtml appendString : @"<meta name=\"black\" name=\"apple-mobile-web-app-status-bar-style\" />" ];
//適配圖片寬度，讓圖片寬度等於屏幕寬度
//[headHtml appendString : @"<style>img{width:100%;}</style>" ];
//[headHtml appendString : @"<style>img{height:auto;}</style>" ];
//適配圖片寬度，讓圖片寬度最大等於屏幕寬度
// [headHtml appendString : @"<style>img{max-width:100%;width:auto;height:auto;}</style>"];
//適配圖片寬度，如果圖片寬度超過手機屏幕寬度，就讓圖片寬度等於手機屏幕寬度，高度自適應，如果圖片寬度小於屏幕寬度，就顯示圖片大小
[headHtml appendString : @"<script type='text/javascript'>"
"window.onload = function(){\n"
"var maxwidth=document.body.clientWidth;\n" //屏幕寬度
"for(i=0;i <document.images.length;i++){\n"
"var myimg = document.images[i];\n"
"if(myimg.width > maxwidth){\n"
"myimg.style.width = '100%';\n"
"myimg.style.height = 'auto'\n;"
"}\n"
"}\n"
"}\n"
"</script>\n"];
[headHtml appendString : @"<style>table{width:100%;}</style>" ];
[headHtml appendString : @"<title>webview</title>" ];
NSString *bodyHtml;
bodyHtml = [NSString stringWithString:headHtml];
bodyHtml = [bodyHtml stringByAppendingString:htmlStr];
return bodyHtml;
}
這樣加上直接調用，就會自動適配文字，圖片等大小了，如下
[self.webView loadHTMLString:[self adaptWebViewForHtml:pxfxjs_app] baseURL:nil];
另外在網上看了一下如果你想要把img標籤裏的圖片換成你本地的圖片的話，可以做以下處理,把img標籤的src改成本地圖片名稱
<span><img src="[email protected]" alt="圖片" /></span><span class="s4"><br><br></span>
然後baseURL改爲圖片路徑，替換路徑
NSString *resPath = [[NSBundle mainBundle] resourcePath];
NSString *htmlFilePath = [resPath stringByAppendingPathComponent:@"index.html"];
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"image@3x" ofType:@"png"];
if ([[NSFileManager defaultManager] fileExistsAtPath:htmlFilePath]) {
NSString *string = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:nil];
if (string) {
NSString *htmlString = string;
[_webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:imagePath]];
}
作者：hanyongwei
鏈接：https://www.jianshu.com/p/13287ff0d788
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。