preface

In the development, we may encounter the display requirements of HTML web pages. In order to make the display content flexible, many news applications are developed by using HTML + local native interface. Start by getting the HTML source code. When we get the HTML source code, the first step is to display the web content on the webView, which is obviously an easy step. If the whole page is simply a web page, basically completed, is pure web display! But if you embed a webView in a native page, such as a webView in a tableView, you run into some problems. Probably the hardest problem to solve is the height of the webView.

plan

WebView contains content height (contentSize). If the content height is larger than the height of the control, then the webView will scroll and the outer tablView will not receive the current scroll gesture. And that actually creates a problem, is that instead of browsing what the tableView is supposed to display, you end up with a scrolling webView, isn’t that weird, and it affects the user experience.

In fact, the solution is also very simple, as long as the webView contentSize height set to the webView control height can be. So you don’t have scrolling problems with webView content. The key is how and when to set the content height.

In fact, I tried many kinds of schemes, such as in the webView proxy callback to achieve the height of the update, but in the proxy, there is only a webView content after the completion of the callback method, if updated at this time, there will be a very obvious jump effect, really is very painful. Because the content of the page changes in real time, this jump is more pronounced if the height of the page is updated at the end of the page load. In fact, what we need is to update the height of the web content in real time. Only in this way can we browse the webView on the tablView like browsing a web page. Therefore, in order to solve this problem, I used KVO to monitor the height of the web content. If the height changes, the control height of the webView will be updated. In this way, real-time performance can be achieved, and the height of the web page and the height of the web content will always be consistent.

implementation

Talk about implementation! Code here, ha ha ~

- (void)creatView{

    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 300)];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]; [self.webView.scrollView addObserver:self] [self.webView.scrollView addObserver:self] [self.webView.scrollView addObserver:selfforKeyPath:@"contentSize"options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil]; self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStyleGrouped]; self.tableView.backgroundColor = [UIColor whiteColor]; self.tableView.delegate = self; self.tableView.dataSource = self; self.tableView.rowHeight = 80; / / set the webView for tableView header self. The tableView. TableHeaderView = self. WebView; [self.view addSubview:self.tableView]; }Copy the code
// Change the webView control height in real time, Observeforkeypath :(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{if ([keyPath isEqualToString:@"contentSize"]) { CGRect frame = self.webView.frame; frame.size.height = self.webView.scrollView.contentSize.height; self.webView.frame = frame; self.tableView.tableHeaderView = self.webView; }} - (void)dealloc{// Remove listener [self.webview.scrollView removeObserver:selfforKeyPath:@"contentSize"];
}

Pragma-mark-tableview (pragma-mark-tableView
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellID = @"reuseCell";
    
    UITableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID];
    
    if (tableViewCell == nil) {
        tableViewCell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    
    
    tableViewCell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    
    return tableViewCell;

    
}

Copy the code

The corresponding effect is as follows:

example

I see a Demo