iOS 精準獲取webView內容高度並自適應高度
參考文件:
iOS【終極方案】精準獲取webView內容高度,自適應高度
iOS精準獲取webView內容高度,自適應高度(cell篇)
#pragma mark-懶載入webView
-(UIWebView *)webView{
if (!_webView) {
// _webView = [[UIWebView alloc] init];
// 1隨便多少,不能為0
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,1)];
_webView.delegate = self;
_webView.scrollView.scrollEnabled = NO;
//這個屬性不加,webview會顯示很大.
_webView.scalesPageToFit = YES;
_webView.opaque =NO;
//預先載入url
[_webView loadRequest:[[NSURLRequest alloc] initWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@/api/product/piclist?item_id=%@",SERVER,self.model.itemid]]]];
//給webView的scrollView的contentSize屬性新增監聽,每當內容發生變化,contentSize一定會跟著變,捕獲這個變動
// [self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:(NSKeyValueObservingOptionNew) context:nil];
[self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
}
return _webView;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.webView];
}
#pragma mark - UIWebView Delegate Methods
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
[[MBProgressHUD HUDForView:self.view] removeFromSuperview];
// //獲取到webview的高度
//// CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.scrollHeight"]floatValue];
// self.webViewHeight = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
// CGSize webSize = [webView sizeThatFits:CGSizeZero];
// [webView mas_updateConstraints:^(MASConstraintMaker *make) {
// make.height.equalTo(@(webSize.height));
// }];
// cellhight = self.webViewHeight;
// [self.tableView reloadData];
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
NSLog(@"webViewDidStartLoad");
// [MBProgressHUD showHUDAddedTo:self.view animated:YES];
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nonnull NSError *)error
{
NSLog(@"didFailLoadWithError===%@", error);
isOpen = !isOpen;
[[MBProgressHUD HUDForView:self.view] removeFromSuperview];
[AMShowMessage showMessage:@"載入失敗" withDuration:2];
[self.tableView reloadData];
}
#pragma mark-監聽的處理1、監聽tableview偏移(控制導航的透明度)2、監聽webView.scrollView的contentSize的變化
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
if ([keyPath isEqualToString:@"contentOffset"])
{
UIButton * bottom = [self.view viewWithTag:1000];
CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
CGFloat alpha = offset.y/NAVIGATION_BAR_HEIGHT >1.0f ? 1:offset.y/NAVIGATION_BAR_HEIGHT;
//設定一個顏色並轉化為圖片
UIImage *image = [self imageWithColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:alpha]];
self.navigationView.image = image;
self.navigationController.navigationBar.alpha = alpha;
self.topView.backgroundColor = [UIColor colorWithPatternImage:image];
self.topView.alpha = alpha;
if (offset.y > 0) {
self.navigationView.isAlphZero = NO;
bottom.hidden = NO;
}else{
self.navigationView.isAlphZero = YES;
bottom.hidden = YES;
}
}
if ([keyPath isEqualToString:@"contentSize"]) {
//通過JS程式碼獲取webview的內容高度
//self.webViewHeight = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
//通過webview的contentSize獲取內容高度
//self.webViewHeight = [self.showWebView.scrollView contentSize].height;
CGRect frame = self.webView.frame;
//通過webview的contentSize獲取內容高度
frame.size.height = self.webView.scrollView.contentSize.height;
//這裡獲取webView的高度
_webViewHeight = frame.size.height;
NSLog(@"%f",frame.size.height);
cellhight =_webViewHeight;
CGSize webSize = [self.webView sizeThatFits:CGSizeZero];
[self.webView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@(webSize.height));
}];
[self.tableView reloadData];
}
}
反思:
1、在webViewDidFinishLoad方法中獲取webView的內容高度,會導致獲取的內容高度不精確,因為webViewDidFinishLoad代理方法被呼叫時,頁面並不一定完全展現完成,可能有圖片還未載入出來,導致此時獲取的高度是並不是最終高度,過會兒圖片載入出來後,瀏覽器會重新排版,而我們在這之前給了一個錯誤高度,導致顯示異常。所以需要在監聽到webView.scrollView的contentSize變化時,獲取到的webView的內容高度才時精確的。
#pragma mark - UIWebView Delegate Methods
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
[[MBProgressHUD HUDForView:self.view] removeFromSuperview];
// //獲取到webview的高度
//// CGFloat height = [[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.scrollHeight"]floatValue];
// self.webViewHeight = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"] floatValue];
// CGSize webSize = [webView sizeThatFits:CGSizeZero];
// [webView mas_updateConstraints:^(MASConstraintMaker *make) {
// make.height.equalTo(@(webSize.height));
// }];
// cellhight = self.webViewHeight;
[self.tableView reloadData];
}
2、例項化建立webView的時候,必須設定frame值,否值不顯示
// 高度隨便多少,可以為1,但不能為0,為0 則webView不顯示
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,1)];
相關文章
- React Native踩坑指南:WebView高度自適應React NativeWebView
- UITableViewCell含有WebView的自適應高度新解決方案UIWebView
- js獲取iframe和父級之間元素,方法、屬,獲取iframe的高度自適應iframe高度JS
- textarea 高度自適應
- html iframe高度自適應HTML
- textarea文域高度自適應
- textarea高度自適應詳解
- 小程式Swiper高度自適應
- jQuery textarea框高度自適應jQuery
- iframe 跨域高度自適應跨域
- Widget小元件如何自適應高度元件
- iframe自適應高度的外掛
- 自動載入的iframe高度自適應
- 巢狀UITextView的UITableViewCell高度自適應巢狀UITextView
- 微信小程式Swiper高度自適應微信小程式
- textarea實現高度自適應的理解
- easyui-layout佈局高度自適應UI
- 微信輪播圖自適應高度
- 微信小程式swiper高度自適應,swiper的子元素高度不固定微信小程式
- 真正解決iframe高度自適應問題
- textarea文字框高度自適應程式碼例項
- Android獲取狀態列高度Android
- iOS初級開發學習筆記:一個頁面中自動計算cell的高度來自適應tableView的高度iOS筆記View
- 67,表格中單元格td自適應高度,最大高度後滾動條顯示
- Swift iOS : 如果Cell內部有webview怎麼自適應呢SwiftiOSWebView
- RN 踩坑:內容區域高度
- 好程式設計師web前端分享高度自適應程式設計師Web前端
- Android XML靈活佈局之 EditText實現自適應高度同時限制最小和最大高度AndroidXML
- CSS 圖片固定長寬比實現高度自適應CSS
- 怎麼讓body高度自適應螢幕?為什麼?
- 前端頁面高度和寬度自適應怎麼做?前端
- iOS AutoLayout進階(五)UITableViewCell自動高度iOSUIView
- Android 監聽鍵盤狀態變化,並獲取鍵盤高度Android
- iframe 裡的高度適應的問題
- 移動端:對高度自適應的輸入框說不~
- css--常見左右盒子寬度高度自適應佈局CSS
- Iframe嵌入跨域頁面高度自適應實現詳解跨域
- 瀏覽器滾動條高度的獲取瀏覽器