使用 Javascript 获取 webView 内容的总高度答案

【问题标题】：Get total height of webView's content using Javascript使用 Javascript 获取 webView 内容的总高度
【发布时间】：2011-02-28 02:54:23
【问题描述】：

我正在使用UIWebView 以 HTML 字符串的形式显示内容 - 不是网站，高于 iPhone 的屏幕，无需在 webView 本身中滚动，将其留给父 scrollView .

为了实现这一点，我需要一种方法来获取总文档大小（包括可滚动区域）来设置 webView 的高度。我尝试了许多不同的 Javascript 解决方案：

(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

有没有真正有效的解决方案？

当前（非工作）代码：

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

【问题讨论】：

document.body.scrollHeight 工作吗？

标签： javascript iphone objective-c uiwebview uiscrollview

【解决方案1】：

在 iOS 5.0 及更高版本中无需使用 Javascript - 您可以直接访问它的 scrollView：

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

获取webView内容的总高度。

【讨论】：

这是一个更好的解决方案！谢谢！
这将返回一个更大的值！比实际内容的高度。我的身体只有一条线。但它返回的高度与我在开始时为 webview 设置的高度相同。
这对我来说返回 0！
显然，这仅在您在情节提要中创建 UIWebView 时才有效。仅在代码中创建它导致我得到 0 的值。
此解决方案不再有效。结果是随机的和不可预测的。特别是对于复杂的 HTML 代码和 CSS。请参阅@karim 的答案。

【解决方案2】：

当我尝试使用我的代码时，我发现，

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

(1) 返回小于原始高度的高度。但(2) 返回实际高度。我的建议是获得两者中的Max。

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

输出

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

【讨论】：

2011 年更正。但在 2017 年 document.body.scrollHeight 可以在 Javascript 中使用。

【解决方案3】：

我采用了一种稍微不同的方法，创建了一个

，我可以关闭它来获取大小，因为我在检查文档/正文方面没有运气。

这是 MonoTouch C#，但在 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);

并在 LoadFinished 中获取高度：

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

@Jesse，这适用于使用 HTML 进行更新，生成的尺寸比之前显示的更小。

【讨论】：

非常适合我

【解决方案4】：

你在哪里调用你的代码？对我来说，如果在 loadHTMLString 方法之后立即调用它，它会返回 0。如果我在 (void)webViewDidFinishLoad:(UIWebView *)theWebView 委托中调用它，我会得到一个有效值。

- (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
}

【讨论】：

好的，如果 HTML 内容越来越大，这将非常有用。但是，如果我尝试通过再次调用 loadHTMLString 来更新内容，并且新内容恰好更短，则 document.body.offsetHeight 仍然返回相同的值。还有其他人遇到这个问题吗？