快捷導(dǎo)航

iOS中精確計(jì)算WebView高度的方法示例

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

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

前言

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

答案是監(jiān)聽(tīng)，具體的實(shí)現(xiàn)過(guò)程如下：

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

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

//監(jiān)聽(tīng)回調(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開(kāi)發(fā)之解決WebView自適應(yīng)內(nèi)容高度

首先如果直接進(jìn)行內(nèi)容展示，或者進(jìn)行sizeToFit的操作，那么可能會(huì)造成圖片超過(guò)屏幕大小，字體變得很小的結(jié)果，所以這里用到了UIWebView的delegate方法和添加了html的標(biāo)簽語(yǔ)言，使用了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 
{ 
//獲取頁(yè)面高度（像素） 
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); 

//下面這樣寫(xiě)就是獲取到比較準(zhǔn)確的內(nèi)容高度，不需要再進(jìn)行其他計(jì)算了 
//獲取內(nèi)容實(shí)際高度（像素） 
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高度（點(diǎn)） 
webView.frame = CGRectMake(15, _whereNewsLabel.bottom+10, f_Device_w-30, height); 

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

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

總結(jié)

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

您可能感興趣的文章: