快捷導航

iOS中精確計算WebView高度的方法示例

更新時間：2018年05月14日 11:16:47 作者：coder小鵬

這篇文章主要給大家介紹了關(guān)于iOS中如何精確計算WebView高度，以及iOS開發(fā)之解決WebView自適應內(nèi)容高度的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧

前言

在開發(fā)app的過程中難免會遇到將webView加載到tableView的cell上的需求，一般遇到這種問題，通常想到的思路就是在webView的回調(diào)方法webViewDidFinishLoad中獲取到webView的高度,刷新tableView，將高度賦值給tableView的回調(diào)方法heightForRow?？此茮]有任何問題，但是在實際操作的時候卻發(fā)現(xiàn)得到的高度并不是webView的實際高度，顯然這種方法是行不通的。其實并不是方法不行，而是webViewDidFinishLoad代理方法被調(diào)用時，頁面并不一定完全展現(xiàn)完成，可能有圖片還未加載出來，導致此時獲取的高度是并不是最終高度，過會兒圖片加載出來后，瀏覽器會重新排版，而我們在這之前給了一個錯誤高度，導致顯示異常。既然這種方法行不通，那么到底如何才能準確計算webView的高度呢？

答案是監(jiān)聽，具體的實現(xiàn)過程如下：

給webView的scrollView的contentSize屬性添加監(jiān)聽，每當內(nèi)容發(fā)生變化，contentSize一定會跟著變，捕獲這個變動，在監(jiān)聽方法中實現(xiàn)webViewDidFinishLoad中的代碼，也就是獲取最新的內(nèi)容高度賦給webView：

//添加監(jiān)聽
[_WebView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:@"WejinWuLiuViewController"];

//監(jiān)聽回調(diào)
- (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;
 newFrame.size.height = _webViewHeight;
 _WebView.frame = newFrame;
 }
}

iOS開發(fā)之解決WebView自適應內(nèi)容高度

首先如果直接進行內(nèi)容展示，或者進行sizeToFit的操作，那么可能會造成圖片超過屏幕大小，字體變得很小的結(jié)果，所以這里用到了UIWebView的delegate方法和添加了html的標簽語言，使用了javascript操作方法。具體可以研究代碼，如下：

//web 
-(UIWebView *)detailWebView 
{ 
if (_detailWebView == nil) { 
_detailWebView = [UIWebView new]; 
_detailWebView.delegate = self; 
_detailWebView.scrollView.bounces = NO; 
_detailWebView.scrollView.showsHorizontalScrollIndicator = NO; 
_detailWebView.scrollView.scrollEnabled = 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 ----- webView 的 delegate 
- (void)webViewDidFinishLoad:(UIWebView *)webView 
{ 
//獲取頁面高度（像素） 
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]; 
float clientheight = [clientheight_str floatValue]; 
//設(shè)置到WebView上 
webView.frame = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, clientheight); 

//下面這樣寫就是獲取到比較準確的內(nèi)容高度，不需要再進行其他計算了 
//獲取內(nèi)容實際高度（像素） 
NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top')) + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"]; 
float height = [height_str floatValue]; 

//再次設(shè)置WebView高度（點） 
webView.frame = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, height); 

if ([self.delegate respondsToSelector:@selector(backWebViewWithHeight:)]) { 
[self.delegate backWebViewWithHeight:webView.bottom+5]; 
} 
}

有寫代碼是我項目中使用的，沒有必要用，大家可以根據(jù)自己的需要修改，必要的代碼上面都有

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: