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]];

至此,收工,文中如有错误希望大家在评论中及时指出,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,900评论 25 707
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,381评论 0 17
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,068评论 4 62
  • 那时像人 如今是鬼
    王根云阅读 196评论 0 2
  • 30多岁其实是个很痛苦的年纪。你已进入传统观念里面的而立之年,但想法依然幼稚的可怜。 30多岁的时候已经工作了几年...
    清风徐阅读 285评论 0 1