Preface
In the process of developing an app, you will inevitably encounter the need to load a webView on the cell of the tableView. Generally, when encountering this problem, the idea that comes to mind is to get the height of the webView in the webViewDidFinishLoad, refresh the tableView, and assign the height to the tableView's callback method heightForRow. It seems that there is no problem, but when you actually operate, you find that the height you get is not the actual height of the webView. Obviously, this method does not work. In fact, it is not that the method is not working, but when the webViewDidFinishLoad proxy method is called, the page may not be fully displayed. Some images may not have been loaded yet, resulting in the height obtained at this time not being the final height. After the picture is loaded, the browser will retype it, and before this we gave an error height, resulting in an abnormal display. Since this method doesn't work, how can we accurately calculate the height of the webView?
The answer is monitoring, the specific implementation process is as follows:
Add a listening to the contentSize property of the scrollView of the webView. Whenever the content changes, the contentSize will change accordingly, capture this change, and implement the code in the webViewDidFinishLoad in the listening method, that is, obtain the latest content height to assign it to the webView:
//Add to listen[_WebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:@"WejinWuLiuViewController"];
// Listen to callback- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"contentSize"]) {
_webViewHeight = [_WebView.scrollView contentSize].height;
CGRect newFrame = _WebView.frame;
= _webViewHeight;
_WebView.frame = newFrame;
}
}
iOS development to solve the adaptive content height of WebView
First of all, if you directly display content or perform sizeToFit operation, the image may exceed the screen size and the font becomes very small. Therefore, here we use the delegate method of UIWebView and the tag language with html added, and use the JavaScript operation method. You can study the code specifically, as follows:
//web
-(UIWebView *)detailWebView
{
if (_detailWebView == nil) {
_detailWebView = [UIWebView new];
_detailWebView.delegate = self;
_detailWebView. = NO;
_detailWebView. = NO;
_detailWebView. = NO;
_detailWebView.dataDetectorTypes = UIDataDetectorTypeAll;
[_detailWebView sizeToFit];
}
return _detailWebView;
}
NSString *htmlcontent = [NSString stringWithFormat:@"<head><style>img{max-width:%fpx !important;}</style></head><div id=\"webview_content_wrapper\">%@</div>",f_Device_w-30,detailDic[@"content"]];
[_detailWebView loadHTMLString:htmlcontent baseURL:nil];
#pragma mark ----- delegate of webView- (void)webViewDidFinishLoad:(UIWebView *)webView
{
//Get page height (pixel)NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @""];
float clientheight = [clientheight_str floatValue];
//Set on WebView = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, clientheight);
//Writing below is to get a relatively accurate content height, and no other calculations are required//Get the actual height of the content (pixels)NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"('webview_content_wrapper').offsetHeight + parseInt((('body')[0]).getPropertyValue('margin-top')) + parseInt((('body')[0]).getPropertyValue('margin-bottom'))"];
float height = [height_str floatValue];
//Set the WebView height again (point) = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, height);
if ([ respondsToSelector:@selector(backWebViewWithHeight:)]) {
[ backWebViewWithHeight:+5];
}
}
There is a code written in my project, and it is not necessary to use it. You can modify it according to your needs. There are all necessary codes on it.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.