WebView加载H5页面

2016-07-12 本文已影响2691人 kuxiu

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) {
        
    }];
    
}

初始化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;
}

在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;
}

WebView加载H5页面

猜你喜欢

热点阅读