如何獲取webView真實(shí)的高度

iOS日常開發(fā)過程中經(jīng)常遇到web嵌套到tableview的場(chǎng)景,這時(shí)候webView的高度計(jì)算顯得很重要。

日常使用姿勢(shì)如下在webViewDidFinishLoad:方法中,通過JS注入方法獲取web的高度:

NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float height = [clientheight_str floatValue];

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn),使用如上方法計(jì)算高度時(shí),有時(shí)候會(huì)出現(xiàn)網(wǎng)頁顯示不全的現(xiàn)象,也就是計(jì)算實(shí)際高度不對(duì)。

學(xué)過h5的同學(xué)都知道,上述的高度取的是網(wǎng)頁<body><body>(網(wǎng)頁內(nèi)容)的高度,但并不是實(shí)際在webView中渲染出來之后的高度,所以要獲取實(shí)際真實(shí)高度需要多一步操作,如下:

//獲取頁面高度(像素)
    NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
    float clientheight = [clientheight_str floatValue];
 //設(shè)置到WebView上
    webView.frame = CGRectMake(0, 0, ScreenWidth, clientheight);
//獲取WebView最佳尺寸(點(diǎn))
    CGSize frame = [webView sizeThatFits:webView.frame.size];
//獲取內(nèi)容實(shí)際高度(像素)
    NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
    float height = [height_str floatValue];
//    //內(nèi)容實(shí)際高度(像素)* 點(diǎn)和像素的比
    height = height * frame.height / clientheight;

第一次獲取高度并不是真正下是之后的高度,第二次獲取的height_str才是真正webView實(shí)際顯示之后的高度,代碼的第三行設(shè)置webView的frame非常重要,相當(dāng)于對(duì)內(nèi)容的一次渲染,之后去獲取才是webView顯示之后的真正高度。調(diào)試斷點(diǎn)截圖如下:

xcode控制臺(tái).png

可以看到兩次獲取body的高度不一致,第二次為實(shí)際渲染后webView的內(nèi)容高度

webView實(shí)際使用中,高度計(jì)算可能受到body設(shè)置的padding和margin有關(guān)參數(shù)的影響,情況具體分析。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,160評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評(píng)論 25 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,578評(píng)論 19 139
  • 學(xué)習(xí)ubuntu圖形界面的最好方法就是把在windows下的活動(dòng)全部搬運(yùn)到ubuntu里來做,所以我們裝好ubun...
    BNH_96閱讀 7,732評(píng)論 3 3

友情鏈接更多精彩內(nèi)容