WebView加载H5页面

1.向后台服务器请求数据

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.title = self.headline.title;
    
    self.automaticallyAdjustsScrollViewInsets = NO;
//    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.headline.url_3w]]];
    
    NSString *url = [NSString stringWithFormat:@"http://c.m.163.com/nc/article/%@/full.html",self.headline.docid];
    [[LTHttpManager manager] GET:url parameters:nil progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
//        [responseObject writeToFile:@"/Users/xiufengfan/Desktop/detail.plist" atomically:YES];
//        NSLog(@"%@",self.headline.docid);
        LTNewsDetail *detail = [LTNewsDetail mj_objectWithKeyValues:responseObject[self.headline.docid]];
        self.detail = detail;
        [self showNewsDetail];
    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
        
    }];
    
}
  1. 初始化html,并显示
-(void)showNewsDetail
{
    /*
    NSMutableString *html = [NSMutableString string];
    // 头内容
    [html appendString:@"<html>"];
    [html appendString:@"<head>"];
    [html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"LTNewsDetail.css" withExtension:nil]];
    [html appendString:@"</head>"];
    // 具体内容
    [html appendString:@"<body>"];
    
    // 将图片插入body对应的标记中,比如<!--IMG#0-->
    [html appendString:[self setupBody]];
    
    [html appendString:@"</body>"];
    // 尾部内容
    [html appendString:@"</html>"];
     */
    NSMutableString *html = [NSMutableString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"LTNewsDetail.tpl" withExtension:nil] encoding:NSUTF8StringEncoding error:nil];
    
    NSString *link = [NSString stringWithFormat:@"%@",[[NSBundle mainBundle] URLForResource:@"LTNewsDetail.css" withExtension:nil]];
    
    [html replaceOccurrencesOfString:@"<!--LINKHREF-->" withString:link options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)];
    // 将图片插入body对应的标记中,比如<!--IMG#0-->
    [html replaceOccurrencesOfString:@"<!--BODY-->" withString:[self setupBody] options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)];
    
    // 显示网页
    [self.webView loadHTMLString:html baseURL:nil];
}

3.初始化body,并返回body

-(NSString*)setupBody
{
    /*
    // 手动添加标签
    NSMutableString *body = [NSMutableString string];
    // 拼接标题
    [body appendFormat:@"<div class = \"title\">%@</div>",self.detail.title];
    // 拼接时间
    [body appendFormat:@"<div class = \"time\">%@</div>",self.detail.ptime];
    // 拼接内容
    [body appendString:self.detail.body];
    */
    
    // 利用模板添加标签
    NSMutableString *body = [NSMutableString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"LTNewsDetailBody.tpl" withExtension:nil] encoding:NSUTF8StringEncoding error:nil];
    [body replaceOccurrencesOfString:@"<!--DIVTITLE-->" withString:self.detail.title options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
    [body replaceOccurrencesOfString:@"<!--DIVTIME-->" withString:self.detail.ptime options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
    [body appendString:self.detail.body];
    
    // 拼接图片
    for (LTNewsDetailImg *img in self.detail.img) {
        // 图片html的字符串
        NSMutableString *imgHtml = [NSMutableString stringWithContentsOfURL:[[NSBundle mainBundle]URLForResource:@"LTNewsDetailBodyImg.tpl" withExtension:nil] encoding:NSUTF8StringEncoding error:nil];
        /*
         // 手动添加标签
        [imgHtml appendString:@"<div class = \"img-parent\">"];
        NSString *onload = @"this.onclick = function(){ window.location.href = 'lt:src=' + this.src;}";
        NSString *imgStr = [NSString stringWithFormat:@"<img onload =\"%@\" width = \"%d\" height = \"%d\" src=\"%@\">",onload,img.imgWidth,img.imgHeight,img.src];
        [imgHtml appendString:@"</div>"];
        */
        // 利用模板添加标签
        [imgHtml replaceOccurrencesOfString:@"<!--IMGWIDTH-->" withString:[NSString stringWithFormat:@"%d",img.imgWidth] options:NSCaseInsensitiveSearch range:NSMakeRange(0, imgHtml.length)];
        [imgHtml replaceOccurrencesOfString:@"<!--IMGHEIGHT-->" withString:[NSString stringWithFormat:@"%d",img.imgHeight] options:NSCaseInsensitiveSearch range:NSMakeRange(0, imgHtml.length)];
        [imgHtml replaceOccurrencesOfString:@"<!--IMGSRC-->" withString:[NSString stringWithFormat:@"%@",img.src] options:NSCaseInsensitiveSearch range:NSMakeRange(0, imgHtml.length)];
        
        // 为图片添加需要被拦截的href
        NSString *href = @"'lt:(saveImageToAlbum:)&src=' + this.src";
        self.href = href;
        [imgHtml replaceOccurrencesOfString:@"<!--ONLOADHREF-->" withString:self.href options:NSCaseInsensitiveSearch range:NSMakeRange(0, imgHtml.length)];
        
        // 将img.ref替换为img标签内容
        [body replaceOccurrencesOfString:img.ref withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
    }
    return body;
}
  1. 在h5界面要使用原生功能时,需要监听webView的代理,使用h5 脚本语言加载 href 时调用webView的开始加载请求时调用代理方法webView:(UIWebView *)webView shouldStartLoadWithRequest:navigationType:,可以判断请求是否需要拦截.
// MARK: pragma mark - UIWebViewDelegate
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    NSRange range = [url rangeOfString:@"lt:(saveImageToAlbum:)&src="];
    if (range.location != NSNotFound) {
        NSUInteger loc = range.location  + range.length;
        NSString *src = [url substringFromIndex:loc];
        // 执行协议method(saveImageToAlbum:)
        NSRange firstRange = [url rangeOfString:@"("];
    
        NSRange lastRange = [url rangeOfString:@":)"];
        
        NSRange methodRange = NSMakeRange(firstRange.location+firstRange.length, lastRange.location - firstRange.location);
    
        NSString *methodStr = [url substringWithRange:methodRange];
        
        [self performSelector:NSSelectorFromString(methodStr) withObject:src afterDelay:0];
        return NO;
    }
    return YES;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

  • 最近遇到 webview 加载一个h5页面,根本无法加载,打开即崩溃,后来检查 原来是一个css属性不支持,属性如...
    三丰张阅读 2,400评论 1 3
  • iOS开发系列--网络开发 概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微博、微信等,这些应用本身可...
    lichengjin阅读 3,661评论 2 7
  • 首页(新闻数据的处理) 后台返回的数据只有一个Html的Body内容。至于文本的显示样式需要在本地拼处理 这时候就...
    0诛仙0阅读 657评论 0 7
  • 1、设置UILabel行间距 NSMutableAttributedString* attrString = [[...
    十年一品温如言1008阅读 1,655评论 0 3
  • 专注懂事二十年的好孩子,专注懂事二十年的好傻子。 初始是带着启蒙的意味,如光荣纯洁的使命:“以后要做一个懂事的孩子...
    明治阅读 478评论 0 1