“UIWebView 自適應實際內容高度”

起因

公司提出要更改部分界面。其中一個界面是嵌入了一個webView的。要求整個頁面都可以上下滾動,且一個UITextView放在UIWebView下面。

難點

  • UIWebView 的滾動要和 整個頁面的滾動保持一致。只能讓整個UIWebView自適應實際內容高度
  • 加載的網頁的高度是可以動態改變的。也就是說網頁加載完成后,網頁高度可變

分析

  • 整體滾動無疑要用UIScrollView。網頁加載完成后,網頁的高度變化時,要更改UIWebView的高度,進而影響到UITextView的origin.y和UIScrollView的contentSize。嗯,用autolayout很好解決。
  • 網頁的完整高度=document.body.offsetHeight。用stringByEvaluatingJavaScriptFromString:在webViewDidFinishLoad:中獲取。
  • 網頁加載完成后的高度改變,用JavaScriptCore監聽對應的事件。

結果

  • UIWebView自適應實際內容高度 :
dispatch_async(dispatch_get_main_queue(), ^{
        CGFloat webViewHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
 });

這里的webViewHeight 實際使用時出現了無法完全展示網頁的情況,最終在這個值的基礎上加上100,解決!

  • 網頁加載完成后,網頁高度可變 :
 JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"htmlHeightChangeEvent"] = ^{
        //上述獲取高度的方法
        dispatch_async(dispatch_get_main_queue(), ^{
        CGFloat webViewHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
 });
    }];

不同步到主線程,會在網頁加載完成后,改變網頁高度時,報‘警告’,大意是說有可能出現詭異的錯誤。


The End

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容