iOS日常開發過程中經常遇到web嵌套到tableview的場景,這時候webView的高度計算顯得很重要。
日常使用姿勢如下在webViewDidFinishLoad:方法中,通過JS注入方法獲取web的高度:
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float height = [clientheight_str floatValue];
細心的同學可能會發現,使用如上方法計算高度時,有時候會出現網頁顯示不全的現象,也就是計算實際高度不對。
學過h5的同學都知道,上述的高度取的是網頁<body><body>(網頁內容)的高度,但并不是實際在webView中渲染出來之后的高度,所以要獲取實際真實高度需要多一步操作,如下:
//獲取頁面高度(像素)
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float clientheight = [clientheight_str floatValue];
//設置到WebView上
webView.frame = CGRectMake(0, 0, ScreenWidth, clientheight);
//獲取WebView最佳尺寸(點)
CGSize frame = [webView sizeThatFits:webView.frame.size];
//獲取內容實際高度(像素)
NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float height = [height_str floatValue];
// //內容實際高度(像素)* 點和像素的比
height = height * frame.height / clientheight;
第一次獲取高度并不是真正下是之后的高度,第二次獲取的height_str才是真正webView實際顯示之后的高度,代碼的第三行設置webView的frame非常重要,相當于對內容的一次渲染,之后去獲取才是webView顯示之后的真正高度。調試斷點截圖如下:
xcode控制臺.png
可以看到兩次獲取body的高度不一致,第二次為實際渲染后webView的內容高度
webView實際使用中,高度計算可能受到body設置的padding和margin有關參數的影響,情況具體分析。