对于后台返回的html标签中图片处理的问题

作者: zrock_chen | 来源:发表于2018-02-01 17:53 被阅读0次

对于后台返回的html标签中图片处理的问题
在vue中后台返回的文本包含标签时解析html代码
OC --- 过滤Html标签
7 HTML中img标签的图片资源处理
textView显示html图片左边一直有空白间隙的坑
axios处理后台返回图片流格式数据
Android解码Base64图片
2018-01-16
使用ng-bind-html指令和$sce服务
iOS WKWebView loadHTMLString 异步加

最近用wkweb加载html时在底部总会出现一大段空白的，高度计算不正确，有图片加载时显示的不正常，为解决这个问题自己在服务器返回html的基础上拼接了一段html，因此在此记录下。

服务器返回的HTML有图片的

设置图片样式

NSString *imageStyleStr = [NSString stringWithFormat:@"<%@ %@",@"img",@"style='display: block; max-width: 100%;'"];

替换html中img标签
contentStr 是从服务器得到html
contentStr = [contentStr stringByReplacingOccurrencesOfString:@"<img" withString:imageStyleStr];
拼接HTML的头

@"<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/><meta content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;\" name=\"viewport\" /><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"><link rel=\"stylesheet\" type=\"text/css\" /><style type=\"text/css\"> .color{color:#576b95;}</style></head><body><div id=\"content\">此处是要显示的html标签内容</div>

在加载完成的代理中，修改颜色和字体

//在加载完成代理方法中，修改字体大小 
    [webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '280%'" completionHandler:nil];
    [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#848484'" completionHandler:nil];

监听高度和加载进度

//进度条
[RACObserve(self.wkWeb, estimatedProgress) subscribeNext:^(id  _Nullable x) {
        @strongify(self);
        if ([x floatValue] == 1) {
            [self.progressView setProgress:[x floatValue] animated:YES];
            // 之后0.3秒延迟隐藏
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.5 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
                self.progressView.hidden = YES;
                [self.progressView setProgress:0 animated:NO];
            });
        } else {
            // 加载中
            self.progressView.hidden = NO;
            [self.progressView setProgress:[x floatValue] animated:YES];
        }
    }]
//高度
 [RACObserve(self.wkWeb.scrollView, contentSize) subscribeNext:^(id  _Nullable x) {
         @strongify(self);
        [self.wkWeb mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(self.wkWeb.scrollView.contentSize.height);
        }];
        self.scrollView.contentSize = CGSizeMake(0, self.wkWeb.scrollView.contentSize.height + self.wkWeb.y);
    }];

完成，下面是完整的代码

      //设置图片的样式
      NSString *result = [NSString stringWithFormat:@"<%@ %@",@"img",@"style='display: block; max-width: 100%;'"];
      //获取服务器返回html
      NSString *contentStr = [NSString stringWithFormat:@"%@",data[@"infomation"]];
      //将有<img 标签替换成上面自己拼接好的img
      contentStr = [contentStr stringByReplacingOccurrencesOfString:@"<img" withString:result];
      //拼接完整的html
       NSString *htmlStr = [NSString stringWithFormat:@"<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/><meta content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;\" name=\"viewport\" /><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"><link rel=\"stylesheet\" type=\"text/css\" /><style type=\"text/css\"> .color{color:#576b95;}</style></head><body><div id=\"content\">%@</div>",contentStr];
       //加载HTML
      [self.wkb loadHTMLString:htmlStr baseURL:nil];`