美文网首页iOS
iOS 精准获取webView内容高度并自适应高度

iOS 精准获取webView内容高度并自适应高度

作者: 达_Ambition | 来源:发表于2018-11-23 19:55 被阅读23次

    参考文档:
    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)];
    

    相关文章

      网友评论

        本文标题:iOS 精准获取webView内容高度并自适应高度

        本文链接:https://www.haomeiwen.com/subject/gdrsqqtx.html