Question

I’m dynamically resizing my UIWebView depending on the content in it. If there is alot of content it might span the height of the UIWebView to 1000px and if content is less it might span to 500px (so the UIWebView will have any arbitrary heigh from 0-n px). The code I’m using to find out the UIWebView height after it has loaded the document is this:

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

    // Change the height dynamically of the UIWebView to match the html content
    CGRect webViewFrame = webView.frame;
    webViewFrame.size.height = 1;
    webView.frame = webViewFrame;
    CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
    webViewFrame.size = fittingSize;
    webViewFrame.size.width = 276; // Making sure that the webView doesn't get wider than 276 px
    webView.frame = webViewFrame;

    float webViewHeight = webView.frame.size.height;
}

This works perfectly. But to add to the complexity I’m using javascript (jquery) to check if there is an image in the document that is wider than 276 pixels (the width of my UIWebView).

IF there is an image that is wider I add a class to the img tag named “oversized” and have a css rule that will scale the image properly so it will not be wider than 276 pixels. Since the javascript runs after the document has finished loading I can not longer “catch” the UIWebView height. How can I get the new document height after the javascript has been run?

The javascript I’m using looks like this:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>                            
<script type='text/javascript'>
<![CDATA[  
$(window).load(function(){
    $(document).ready(function() { 
        $('img').each(function(e) { 
            if ($(this).width() > 276) { 
                $(this).parent().addClass('oversized');
            } 
         }); 
    }); 
}); 
//]]>
</script>

And the CSS:

.oversized * { 
    border: 2px solid red;
    width: 100%;
    height: auto;
}

Answer 1

In your -webViewDidFinishLoad: method, you might try adding

NSString *height = [webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"];

Also, instead of using jQuery to try and find the oversized images – in your css, just change the ‘width: 100%’ to ‘max-width: 100%’ and set it for all images:

img { 
    border: 2px solid red;
    max-width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
}

The box-sizing rule will make sure the borders don’t add extra pixels to the width.