UIWebView獲取高度的小坑坑

使用場(chǎng)景:
tableView 的 cell嵌套webView<webView加載一般是加載一個(gè)靜態(tài)網(wǎng)頁(yè),或者加載一段html片段>的時(shí)候,需要獲取webView的內(nèi)容的高度,然后計(jì)算相應(yīng)的cell的高度,進(jìn)而展示一些豐富的富文本之類的東西,是期中的一個(gè)使用場(chǎng)景。當(dāng)然可能還有其他的使用場(chǎng)景。
下面說一下期中的兩個(gè)小坑,或者說注意事項(xiàng)。

獲取webView高度的方法
獲取webView的高度的方法是在webView的代理中進(jìn)行的,當(dāng)webView加載完畢之后,webView的代理中可以獲取相關(guān)的webView的高度

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //獲取到webview的高度
    CGFloat webViewHeight1 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
    CGFloat webViewHeight2 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
    CGFloat webViewHeight3 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.clientHeight"] floatValue];
    
    NSLog(@"webViewHeight1 == %f",webViewHeight1);
    NSLog(@"webViewHeight2 == %f",webViewHeight2);
    NSLog(@"webViewHeight3 == %f",webViewHeight3);
    

    webView.frame = CGRectMake(webView.frame.origin.x,webView.frame.origin.y, kScreenWidth, webViewHeight1);
    // 獲取完畢之后以通知的形式,或者回調(diào)的形式通知tableView刷新
}

使用前提:

- (UIWebView *)myWebView
{
    if (_myWebView == nil) {
        UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 0)];
        webView.delegate = self;
        webView.scrollView.scrollEnabled = NO;
        _myWebView = webView;
    }
    return _myWebView;
}

1、webView設(shè)置相關(guān)代理
2、webView禁止?jié)L動(dòng)
3、設(shè)置plist文件相關(guān)設(shè)置


image.png

但是計(jì)算完畢之后你會(huì)發(fā)現(xiàn)webView獲取的高度不準(zhǔn)確。
計(jì)算結(jié)果如下:


image.png

可以看到,webView的高度偏大。

第一個(gè)小坑出現(xiàn)了,那就是,webView初始化的時(shí)候高度不能設(shè)置為0
但是不知道為啥,有知道的請(qǐng)不吝賜教。

#pragma mark- set
- (UIWebView *)myWebView
{
    if (_myWebView == nil) {
        UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 1)];
        webView.scrollView.scrollEnabled = NO;
        webView.delegate = self;
        _myWebView = webView;
    }
    return _myWebView;
}
image.png

webView初始化的時(shí)候給他一個(gè)高度就都顯示正常了。

第二個(gè)小坑:
當(dāng)前的操作邏輯是這樣的:
1、通過滑動(dòng)tableView,然后調(diào)用UITableViewDataSource的代理方法,
2、cell調(diào)用setModel方法進(jìn)行webView刷新,webView重新加載,
3、通過webView的代理方法<code>- (void)webViewDidFinishLoad:(UIWebView *)webView</code>獲取webView的高度
4、將這個(gè)高度回調(diào)或者通知給tableView,然后tableView刷新該cell的高度

滑動(dòng)cell的時(shí)候,更新cell的model,刷新界面

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyTableViewCell" forIndexPath:indexPath];
    WebModel *model = self.dataSource[indexPath.row];
    cell.model = model;
    
    return cell;
}

webView獲取高度

#pragma mark- UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //獲取到webview的高度
    CGFloat webViewHeight1 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
    CGFloat webViewHeight2 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
    CGFloat webViewHeight3 = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.clientHeight"] floatValue];
    
    NSLog(@"webViewHeight1 == %f",webViewHeight1);
    NSLog(@"webViewHeight2 == %f",webViewHeight2);
    NSLog(@"webViewHeight3 == %f",webViewHeight3);
    
    
    webView.frame = CGRectMake(webView.frame.origin.x,webView.frame.origin.y, kScreenWidth, webViewHeight1);
    
    // 獲取完畢之后以通知的形式,或者回調(diào)的形式通知tableView刷新
    if (self.model.webViewHeight != webViewHeight1) {
        self.model.webViewHeight = webViewHeight1;
        [[NSNotificationCenter defaultCenter] postNotificationName:@"RefreshCell" object:nil];
    }
    
}

VC中獲取刷新的通知,此時(shí)model的高度已經(jīng)修改,也就是說cell的高度已經(jīng)通過webView獲取到了

// 獲取通知
- (void)manageNoti
{
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(refreshCell:) name:@"RefreshCell" object:nil];
}

// 通知方法,刷新tableView
- (void)refreshCell:(NSNotification *)notifaication
{
    [self.myTableView reloadData];
}

第二個(gè)小坑悄無聲息的也來了。


image.png

如果這里webView獲取到高度就直接回調(diào)回去讓tableView去刷新,然后tableView又去刷新cell的model然后webView又會(huì)去獲取高度,獲取高度之后又去通知tableView去刷新,這樣下去就是一個(gè)死循環(huán)了。。。。。。。

最后獻(xiàn)上Demo地址:
https://github.com/RunOfTheSnail/TableViewInsertWebView

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,198評(píng)論 4 61
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,065評(píng)論 25 708
  • #這是我,最卑微的愿望,每次叫起你的名字,就有光# 章邯與曉夢(mèng)相識(shí),很久了。 他也喜歡她很久了。 世人皆稱她曉夢(mèng)大...
    卿長(zhǎng)安_閱讀 11,711評(píng)論 4 6
  • 為了看過的人,要有個(gè)完整的16集。 第十五集 龍?zhí)痘⒀ㄒ惨J一闖 徐拉菲決定要直接的面對(duì)問題,解決問題,如果因?yàn)轭?..
    Tina嬤嬤閱讀 327評(píng)論 0 0
  • 現(xiàn)在是2017.8.24晚上11.33,記錄今天的故事 今日自問 今天有點(diǎn)特別,凌晨的時(shí)候,在和朋友聊選擇,出國(guó)讀...
    飯飯_bms閱讀 235評(píng)論 0 0