關于WebView內容高度的獲取潜叛,相信很多人都踩過坑秽褒,無法獲取到準確高度,導致頁面布局出現(xiàn)差錯威兜,搜到的資料很多但都無法解決問題震嫉,以下是個人經驗總結:
項目需求實現(xiàn)H5文章&原生評論效果牡属,文章是加載H5鏈接逮栅,評論信息是后臺接口提供悴势,以列表形式展示。
實現(xiàn)思路:
1. webView加載H5鏈接措伐,設置它為tableView的 headerView特纤,下方評論信息用Cell加載展示。
2. 在webView的回調方法webViewDidFinishLoad中獲取網頁內容高度侥加,設置為webView的高度捧存,重新將webView賦給tableView的headerView。
Tip: 將一個View賦值給UITableView的tableHeaderView時担败,不需要手動設置高度昔穴,HeaderView會自動使用View的高度。
http://upload-images.jianshu.io/upload_images/743749-6ee2538af7a02af2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
像上面這樣提前,類似的方法很多吗货,無論是JS獲取,還是contentSize獲取狈网,最后結果都難以獲取到準確高度宙搬,并非方法不行,而是:
webViewDidFinishLoad代理方法被調用時拓哺,頁面并不一定完全展現(xiàn)完成勇垛,可能有圖片還未加載出來,導致此時獲取的高度是偏小的士鸥,過會兒圖片加載出來后闲孤,瀏覽器會重新排版網頁被撐大,而我們之前給的高度不夠內容的展示础淤,導致顯示異常崭放。
問題原因已確定,解決思考:
如何能在webViewDidFinishLoad之后獲取到網頁內容高度的變化鸽凶?
答案:監(jiān)聽币砂!
具體實現(xiàn)過程:
http://upload-images.jianshu.io/upload_images/743749-91462536dd5d2a26.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
給webView的scrollView的contentSize屬性添加監(jiān)聽,每當內容發(fā)生變化玻侥,contentSize一定會跟著變决摧,捕獲這個變動,在監(jiān)聽方法中實現(xiàn)webViewDidFinishLoad中的代碼凑兰,也就是獲取最新的內容高度賦給webView:
另外掌桩,在cell中使用webView獲取高度不準確的解決辦法跟上面一樣,只不過需要注意cell中使用webView涉及到cell重用姑食,會導致滑動列表時webView多次加載波岛,影響性能,建議緩存高度音半。