UIWebView with dynamic height inside a UIScrollView in Objective-C

Question

I am trying to make a UIWebView with "dynamic screen height". This webview is inside a UIScrollView, below other components. See the layout (it uses autolayout):

My idea is to provide just one scroll (from UIScrollView - its working) and make the WebView viewport grow depending the content size. And its not working.

What I did to try to do this:

1. UIWebView property "scale page to fit " is on;
2. UIWebView is unpaginated;
3. UIWebView does not allow user interaction.

In my UIViewController:

- (void) viewDidAppear:(BOOL)animated {
    NSString *urlString = @"MY URL GOES HERE";
    NSURL *url = [NSURL URLWithString:urlString];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [_webViewDescription loadRequest:urlRequest];
    _webViewDescription.delegate = self;
    _webViewDescription.scrollView.scrollEnabled = NO;
    _webViewDescription.scrollView.bounces = NO;
}

My UIWebViewDelegate:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    CGRect frame = webView.frame;
    frame.size.height = 1;
    webView.frame = frame;
    CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
    frame.size = fittingSize;

    webView.frame = frame;


    NSLog(@"size: %f, %f", fittingSize.width, fittingSize.height);

    _myScrollView.contentSize = webView.bounds.size;
}

When I run the code, it prints the correct UIScrollView size and UIWebView size. The UIScrollView height got bigger, but the UIWebView maintains the same height from the first loading.

I am testing in a real device.

Answer 1

add a height constraint to your webView and make a IBOutlet of that like

@property(strong, nonatomic) IBOutlet NSLayoutConstraint *webViewHeightConstraint;

load your webview and in web view delegate

- (void)webViewDidFinishLoad:(UIWebView *)webView

get webview content height and set webViewHeightConstraint.constant like below:-

    - (void)webViewDidFinishLoad:(UIWebView *)webView
{

    NSString *str = [webView stringByEvaluatingJavaScriptFromString:@"(document.height !== undefined) ? document.height : document.body.offsetHeight;"];
    CGFloat height = str.floatValue;
    webViewHeightConstraint.constant = height;

}

hope it may help you.

Answer 2

Try to set webView.frame = frame; in viewDidLayoutSubviews()

Answer 3

For setting dynamic height for UIWebView, you need to set the height in webViewDidFinishLoadView method

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
  CGFloat height = [[webview stringByEvaluatingJavaScriptFromString:@"document.height"] floatValue];
   //For Width
 //CGFloat width = [[webview stringByEvaluatingJavaScriptFromString:@"document.width"] floatValue];
 CGRect frame = webview1.frame;
 frame.size.height = height;
 //frame.size.width = width; //Width
 webview.frame = frame;

 CGRect screenBounds = [UIScreen mainScreen].bounds ;
 CGFloat widthForIpad = CGRectGetWidth(screenBounds)  ;
 CGFloat heightForIpad = CGRectGetHeight(screenBounds) ;
 NSLog(@"The iPad width is - %fl",widthForIpad);
 NSLog(@"The iPad height is - %fl",heightForIpad);

 if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) 
 {
   if ([[UIScreen mainScreen] bounds].size.height == 568)
     scrollView.contentSize = CGSizeMake(320, height+370); //set your required height
   else
     scrollView.contentSize = CGSizeMake(320, height+350); //set your required height
  }
  else
  {
    if ([[UIScreen mainScreen] bounds].size.height == 1024)  
        scrollView.contentSize = CGSizeMake(320, height+370);  //For iPad
  }
}

Answer 4

You can get the content size of webview content using webView.scrollView.contentSize.height.

and than you can use this webView.scrollView.contentSize.height to set the contentSize of the scrollview inside webViewDidFinishLoad method.

Like this in webViewDidFinishLoad method

[objWebView setFrame:CGRectMake(objWebView.frame.origin.x, objWebView.frame.origin.y, objWebView.frame.size.width, webView.scrollView.contentSize.height)];
if(objWebView.frame.origin.y+objWebView.frame.size.height > objScrollView.contentSize.height) {
    [objScrollView setContentSize:CGSizeMake(objScrollView.frame.size.width, objWebView.frame.origin.y+objWebView.frame.size.height)];
}