最近用wkweb加載html時在底部總會出現(xiàn)一大段空白的，高度計算不正確，有圖片加載時顯示的不正常，為解決這個問題自己在服務器返回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標簽內(nèi)容</div>
- 在加載完成的代理中，修改顏色和字體
//在加載完成代理方法中，修改字體大小
[webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '280%'" completionHandler:nil];
[ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#848484'" completionHandler:nil];
- 監(jiān)聽高度和加載進度
//進度條
[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頭就可以了，就不寫出來了
第一次寫文章，有不足之處請指正，有需要的同學可以參考下！
