Get total height of webView's content using Javascript

I'm using a UIWebView for displaying content, in the form of an HTML string – not a website, higher than the screen of the iPhone, without needing to scroll in the webView itself, leaving that to the parent scrollView.

To achieve this, I need a way to get the total document size, including the scrollable area, to set the webView's height. I have tried a number of different Javascript solutions:

(document.height !== undefined) ? document.height : document.body.offsetHeight // Returns height of UIWebView
document.body.offsetHeight // Returns zero
document.body.clientHeight // Returns zero
document.documentElement.clientHeight // Returns height of UIWebView
window.innerHeight // Returns height of UIWebView -2
document.body.scrollHeight // Returns zero

Is there a solution that actually works?

Current (nonworking) code:

[[[self.singlePost.contentText subviews] lastObject] setScrollEnabled:NO];
int content_height = [[self.singlePost.contentText stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"] intValue];
NSLog(@"Content_height: %d", content_height);
CGRect rect = self.singlePost.contentText.frame;
rect.size.height = content_height;
self.singlePost.contentText.frame = rect;

Answers:

Answer

There is no need to use Javascript in iOS 5.0 and up - you have direct, documented access to its scrollView:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    CGFloat contentHeight = webView.scrollView.contentSize.height;
    // ....
}

To get the total height of the contents of the webView.

Answer

When I tried with my code, I found,

(1) NSLog(@"webView height: %@", [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]);
(2) NSLog(@"webView height: %@", [webView stringByEvaluatingJavaScriptFromString: @"document.height"]);

(1) return the height less than the original height. But (2) return the actual height. My suggestion is to get the Max of the two.

- (void)webViewDidFinishLoad:(UIWebView *)theWebView {
    NSLog(@"Body height: %@", [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]);
    NSLog(@"Doc height: %@", [webView stringByEvaluatingJavaScriptFromString: @"document.height"]);
    NSString * javaScript = [NSString stringWithFormat:@"document.getElementById('%@').clientHeight", kDivID];
    NSLog(@"Div height: %@",[webView stringByEvaluatingJavaScriptFromString:javaScript]);
    [self reLayout];
}

- (CGFloat) getWebViewPageHeight {
    CGFloat height1 = [[webView stringByEvaluatingJavaScriptFromString: @"document.height"] floatValue];
    CGFloat height2 = [[webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"] floatValue]; 
    return MAX(height1, height2);   
}

Output

Body height: 485
Doc height: 509
Div height: 485
Answer

Where do you call your code? For me it returns 0 if it is called right after the loadHTMLString Method. If I call it in the (void)webViewDidFinishLoad:(UIWebView *)theWebView delegate, I get a valid value.

- (void)loadHTML: (NSString *)html {
    webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    webView.delegate = self;

    NSURL *resourceURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
    [webView loadHTMLString:html baseURL: resourceURL];
    NSLog(@"height: %d", [[webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"] intValue]); // returns 0
  }

- (void)webViewDidFinishLoad:(UIWebView *)theWebView {
    NSLog(@"height: %@", [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"]); //return 2166
}
Answer

I went with a slightly different approach, to create a <DIV> that I could key off of to get the size, because I was having no luck with inspecting document/body.

This is MonoTouch C#, but should work fine in Objective-C:

private const string DIV_ID = "_uiwebview_";

LoadHtmlString("<body style='background-color:#yourcolor; padding:0px; margin:0px'>" +
  "<div style='width:" + Frame.Width + "px; padding:0px; margin:0px; font-family:" + 
  font.Name + "' id=" + DIV_ID + ">" + html + "</div></body>", base_url);

and getting the height in LoadFinished:

string sheight = EvaluateJavascript("document.getElementById('" + DIV_ID +
   "').clientHeight");

@Jesse, this works when updating with HTML that would generate a smaller size than was previously shown.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.