UIWebView Inside UIScrollView Content Size

Question

I have to add UIWebView and some buttons and labels inside UIScrollView. I have seen many question on how to add UIWebView inside UIScrollView but unfortunately they were unable to help me complete my task. So kindly don't mark it as duplicate or something.

Theoretically, the problem can be solved by following steps:

1) Make UIWebView a subview of UIScrollView.

2) Call setScrollEnabled:NO for UIWebView to disable its native scrolling.

3) Set the content size of both UIScrollView and UIWebView to the size of the HTML string loaded inside UIWebview.

I am using iOS 6 and StoryBoards. I have added UIWebView as the subview of UIScrollView.

Then in my webViewDidFinishLoad, I have used the following:

 NSString *webHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.height;"];
 NSLog(@"WebView Height %@", webHeight);

That gives me the height of the WebView.

On the StackOverFlow, I have come across the following.

    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);

Then i have set the size of the UISCrollView to the size UIWebView:

mainScrollView.contentSize = webView.bounds.size;

I can scroll down to the bottom but there is a white space at the bottom and UIWebView is not making its size according to the size of the loaded html content.

Looks like UIScrollView has changed it size to the size of the content of UIWebView but UIWebView is not showing all of it. How can I solve this issue?

Kindly do not advice me about the Apple documentation that says you should not use UIWebView inside UIScrollView. I already know that but I want to use it as per my project requirement.

Answer 1

I think I can shed some light here. I think you are confusing the frame size and the content size. First I'll describe methodology, then make concrete suggestions.

Methodology

You have a webView and you correctly disabled the scrolling on it and set the contentSize to the full size of the web content. You should also set the frame size to the full size of the web content. Then you addSubview this to the scrollView at origin (0,0). Set the scrollView contentSize to the full size of the web content. Set the scrollView frame to the bounds of the viewController.view.

Concrete Suggestions

• The "fittingSize" code you posted does not look right to me. The purpose of that code is to set the frame of the webView. Use NSLog or breakpoints to find out if that is setting the full size of the web content.
• Note that the purpose of the javascript code that you posted is the same as the "fittingSize" code that you posted. Check to see which one produces the correct output.
• Try to figure out the frame sizes of the webView and scrollView to help you debug. The best way to do that is to set different background colors like this: setBackgroundColor:[UIColor redColor]
• My best guess is that the webView.frame.size is not being set large enough.

Answer 2

I’ve found same situation that webView do not reflects frame size changing, a blank remains while scrolls down as Jessica mentioned. I checked my project and found I’ve enabled autoLayout feature, so solutions I’ve found are:

1. disable autoLayout.

2. add height constraint to webView, after changing webView frame size,using follow code like:

   self.webViewHeightConstraint.constant = fittingSize.height; [webView updateConstraints];

Answer 3

To get the height of a UIWebView's content, I highly recommend the answer by 'Phenomena' here: http://stackoverflow.com (Not the accepted answer, the one below.) He/she suggests NOT using 'CGSizeZero', and gives a better solution.