最近用wkweb加載html時(shí)在底部總會(huì)出現(xiàn)一大段空白的蝉仇，高度計(jì)算不正確胳赌，有圖片加載時(shí)顯示的不正常鲫惶，為解決這個(gè)問(wèn)題自己在服務(wù)器返回html的基礎(chǔ)上拼接了一段html鳖孤，因此在此記錄下习瑰。
服務(wù)器返回的HTML有圖片的
- 設(shè)置圖片樣式
NSString *imageStyleStr = [NSString stringWithFormat:@"<%@ %@",@"img",@"style='display: block; max-width: 100%;'"];
替換html中img標(biāo)簽
contentStr 是從服務(wù)器得到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標(biāo)簽內(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)聽高度和加載進(jìn)度
//進(jì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);
}];
-
完成甜奄，下面是完整的代碼
//設(shè)置圖片的樣式 NSString *result = [NSString stringWithFormat:@"<%@ %@",@"img",@"style='display: block; max-width: 100%;'"]; //獲取服務(wù)器返回html NSString *contentStr = [NSString stringWithFormat:@"%@",data[@"infomation"]]; //將有<img 標(biāo)簽替換成上面自己拼接好的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];`
服務(wù)器返回的HTML沒(méi)有圖片的直接拼接上HTML頭就可以了柠横，就不寫出來(lái)了
第一次寫文章，有不足之處請(qǐng)指正课兄，有需要的同學(xué)可以參考下牍氛！
