iOS显示纯HTML代码并且修改HTML代码
iOS显示纯HTML代码并且修改HTML代码
由于后端返回的数据是存HTML代码，如下
<p>我是消息内容</p>
平时我们使用UIWebView或者WKWebView等控件，大多时候是传个网址调用网页,如下
UIWebView *web = [UIWebView new];
NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jianshu.com"]];
[web loadRequest:req];
如果遇到纯HTML代码的时候，其实系统也提供了方法
UIWebView * webView = [UIWebView new];
NSString *htmlString = @"<p>测试</p>";
[webView loadHTMLString:htmlString baseURL:nil];
如果HTML中有图片，通过上面的方式，图片是无法显示出来的，因为HTML中的Image标签是使用的相对路径，所以我们本地是无法直接加载的，要加载出图片也很简单，就是将上面的方法修改一下，如下
UIWebView * webView = [UIWebView new];
NSString *htmlString = @"<p>测试</p><Image src= "/Upload/Img/1.png">";
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString:XHBaseUrl]];
其中的XHBaseUrl就是基地址，也就是拼接到src前面的地址，如上写后，HTML中的src中的图片地址就会变成http://www.xxx.com/Upload/Img/1.png，这就成了相对地址了，就可以直接显示出来了.
经过上面的操作，我们已经可以直接将HTML纯代码显示在WebView上了，也可以加载HTML中的图片，但是还几个问题
1、导航栏的Title
- 我们在
WebView中要给导航栏设置Title大多都是使用如下代码，可以获取到HTML中的标题
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
但是像上文那种，后端就只返回个p标签或者Image标签的话，根本就获取不到标题，这就需要我们自己手动添加标题了
方法也有几种，第一种就是直接在push传值的时候将要显示的Title设置给下个页面就行了
UIWebView *web = [UIWebView new];
web.title = @"我的标题";
但是大多数人都会封装一下WebView，所以导致及时像上面一样将Title传值，到下个页面也会没有标题，原因就是因为生命周期的问题
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
if (title.length > 10) {
title = [[title substringToIndex:9] stringByAppendingString:@"…"];
}
self.navigationItem.title = title;
}
我们设置标题大多都是在WebView加载完后再设置的标题，如果通过传值设置标题，等WebView加载完后没有获取到标题就会把之前的给覆盖掉了，导致标题也没有了。这样的话我们可以先来个简单的办法，如下
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
if (title.length > 10) {
title = [[title substringToIndex:9] stringByAppendingString:@"…"];
}
if (title.length == 0) {
title = self.title;
}
self.navigationItem.title = title;
}
我们在其中添加了一个if判断
if (title.length == 0) {
title = self.title;
}
如果没有获取到HTML的标题，就用我们传值过来的标题，这样一来，标题也算解决了
2、文字大小
- 当加载出HTML的时候，大家会发现文字很小，而且2个手指在屏幕上捏合是可以放大的，这时字体也会跟着变大，不可能用户每次为了看字都要捏合吧，那多麻烦，其实这个解决办法也很简单，而且还可以将上面的Title也一并解决，直接上代码
NSString *Title = @"我是标题";
NSString *Content = @"</p>我是内容</p>";
[NSString stringWithFormat:@"<html> \n"
"<head> \n"
"<Title>%@</Title> \n"
"<meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"/>"
"</style> \n"
"</head> \n"
"<body>%@</body> \n"
"</html>",Title,Content];
方法就是我们直接自己构建HTML代码，其中让字体正常适应的就是
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>这一句代码，这一件代码就可以适配手机屏幕
最后我们将方法提取封装一下
- (NSString *)HTMLAdapter:(NSString *)Content {
return [NSString stringWithFormat:@"<html> \n"
"<head> \n"
"<Title>%@</Title> \n"
"<meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"/>"
"</style> \n"
"</head> \n"
"<body>%@</body> \n"
"</html>",self,Content];
}
我是将其写成了NSString的一个Category
使用的时候就直接
NSString *Title = @"我是标题";
NSString *Content = @"<p>我是内容</p>";
UIWebView *webView = [UIWebView new];
[webView loadHTMLString:[Title HTMLAdapter:Content] baseURL:[NSURL URLWithString:XHBaseUrl]];
至此，收工，文中如有错误希望大家在评论中及时指出，谢谢！
