最近用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];`
服务器返回的HTML没有图片的直接拼接上HTML头就可以了，就不写出来了
第一次写文章，有不足之处请指正，有需要的同学可以参考下！
