UIWebView Doesn't Load Completely, Height Varies

Question

I have a view controller containing some labels and a UIWebView that is loading some html in it. All these labels and UIWebView are subviews of a UIScrollView. I have disabled the scrolling of UIWebView so the labels and UIWebView scrolls all together inside the UIScrollView.

Then i took found the size of the content inside the UiWebView, changed the UIWebView size according to the content size and then set the size of the scroll view to the size of the webview. This is how i did it by adding the following code in webViewDidFinishLoad:

CGRect frame = myWebView.frame;
frame.size.height = 1;
myWebView.frame = frame;
CGSize fittingSize = [myWebView sizeThatFits:CGSizeZero];
frame.size = fittingSize;
myWebView.frame = frame;

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

mainScrollView.contentSize = myWebView.bounds.size; 

As i am using NSLog to see the size of the content of webview, i noticed that it gives different height for the same content. For example, if i open the view controller the first time, it shows the height equal to 915.0 and when i move back in the navigation and come back to this view controller, then the log will show the size to be 1012.0.

I believe it might be due to the images loading in the html content. Can anybody tell how can i fix it to show the right height the first time? Thanks!

UPDATE: If i use a different strategy using javascript, that i have already tried using the following code:

CGRect oldBounds = [[self myWebView] bounds];
CGFloat height = [[myWebView stringByEvaluatingJavaScriptFromString:@"document.height"] floatValue];
NSLog(@"NEW HEIGHT %f", height);
[myWebView setBounds:CGRectMake(oldBounds.origin.x, oldBounds.origin.y, oldBounds.size.width, height)];
mainScrollView.contentSize = myWebView.bounds.size;

This code gives me the right height every time in the log which is exactly i want but the whole webview is shifted a little upward blocking all the labels above it. Am i doing something wrong and how to fix it? Thanks!

Answer 1

This is a very common problem when you try to embed a UIWebView And Other views inside a UIScrollView.

SOLUTION 1: You have already explained the first solution in your question. How ever this solution is only valid when there is only text involved in the UIWebView inside the UIScrollView. If there are images and ajax or any such thing that lazily loads, this solution won't give you the right height the first time.

CGRect frame = myWebView.frame;
frame.size.height = 1;
myWebView.frame = frame;
CGSize fittingSize = [myWebView sizeThatFits:CGSizeZero];
frame.size = fittingSize;
myWebView.frame = frame;

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

mainScrollView.contentSize = myWebView.bounds.size; 

SOLUTION 2: The other solution is using javascript. It gives you the right height everytime but you will face weird issues that i am unable to troubleshoot. In your case, you said that the whole view is shifted a little updwards.

CGRect oldBounds = [[self myWebView] bounds];
CGFloat height = [[myWebView stringByEvaluatingJavaScriptFromString:@"document.height"] floatValue];
NSLog(@"NEW HEIGHT %f", height);
[myWebView setBounds:CGRectMake(oldBounds.origin.x, oldBounds.origin.y, oldBounds.size.width, height)];
mainScrollView.contentSize = myWebView.bounds.size;

SOLUTION 3: The last solution is the one that worked for me and it will definitely solve your problem. It involves merging the code in the first two solutions i described. That is you will get the height using javascript as it gives the right height everytime and then use the rest of the code in the first solution and increment few points. Notice i added +125.0, this is how i solved it:

CGFloat height = [[myWebView stringByEvaluatingJavaScriptFromString:@"document.height"] floatValue];
CGFloat width = [[myWebView stringByEvaluatingJavaScriptFromString:@"document.width"] floatValue];
CGRect frame = myWebView.frame;
frame.size.height = height + 125.0;
frame.size.width = width;
myWebView.frame = frame;
mainScrollView.contentSize = myWebView.bounds.size;

Hope this helps!

Answer 2

The WebView loads all its content asynchronously.

you have to wait for webViewDidFinishLoading so the html is loaded (not the image data yet!) Then it knows the size of the html. There sizeToFit should work.

Answer 3

Since UIWebView loads in the background, you will have to wait until it loads your page, then figure out the height.

One method is here: https://stackoverflow.com/a/3937599/210171.

However, I usually use the javascript technique. In your web view delegate, change your -webViewDidFinishLoad: to look like this:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString * heightString = [webview stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"foo\").offsetHeight;"];
    CGFloat contentHeight = [ heightString doubleValue ] ;
    NSLog( @"contentHeight=%f\n", contentHeight ) ;
}

(This code is taken from https://stackoverflow.com/a/751326/210171)

The height of the content may continue to change as images load if your images don't have their size attribute set. In that case, please see my answer here: https://stackoverflow.com/a/12030878/210171