起因
公司提出要更改部分界面。其中一個界面是嵌入了一個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];
});
}];
不同步到主線程,會在網頁加載完成后,改變網頁高度時,報‘警告’,大意是說有可能出現詭異的錯誤。