iOS中精確計(jì)算WebView高度的方法示例
前言
在開(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ì)腳本之家的支持。
相關(guān)文章
學(xué)習(xí)iOS自定義導(dǎo)航控制器UINavigationController
這篇文章主要為大家詳細(xì)介紹了iOS自定義導(dǎo)航控制器UINavigationController,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09iOS?WKWebView秒開(kāi)方案實(shí)戰(zhàn)記錄
從iOS8開(kāi)始,就引入了新的瀏覽器控件WKWebView,用于取代UIWebView,下面這篇文章主要給大家介紹了關(guān)于iOS?WKWebView秒開(kāi)方案的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12iOS實(shí)現(xiàn)大雪紛飛動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)大雪紛飛動(dòng)畫(huà),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06設(shè)計(jì)模式中的Memento備忘錄模式的在iOS App開(kāi)發(fā)中的運(yùn)用
這篇文章主要介紹了設(shè)計(jì)模式中的Memento備忘錄模式的在iOS App開(kāi)發(fā)中的運(yùn)用,Memento著重于捕獲和具體化當(dāng)前對(duì)象的內(nèi)部狀態(tài),需要的朋友可以參考下2016-03-03Objective-C的UIStackView常用屬性函數(shù)學(xué)習(xí)筆記
這篇文章主要為大家介紹了Objective-C的UIStackView常用屬性函數(shù)學(xué)習(xí)筆記,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03