UIWebView 框架高度基于内容高度答案

【问题标题】：UIWebView frame height based on content heightUIWebView 框架高度基于内容高度
【发布时间】：2014-04-03 05:22:02
【问题描述】：

我目前有一个 UIWebView 对象，它注入了以下 html 字符串：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
        body {
            color: purple;
            background-color: #d8da3d;
        }
    </style>
</head>
<body>
    <div id="content" contenteditable="true"> </div>
    <div style="font-family: Helvetica"> Sample text </div>
</body>
</html>

似乎用上面的html代码，有问题的WebView的contentSize高度是548px，而实际上，它应该比这要小得多，因为只有两行。我也确实加载了对 www.google.com 的 URL 请求。根据我设置的断点，contentSize 似乎确实增加了适当的数量。

所以我想知道是否可以根据 WebView 的内容（或者在我的情况下，使用上述 html 文本设置的 WebView）调整 contentSize 高度。我怀疑我可能必须指定某种 .css 参数，例如高度或最小高度（我已经尝试过这样做，但无济于事）。任何帮助将不胜感激！

编辑：不确定这是否有帮助，但这是我用来设置 html 内容的代码。我在项目中包含了 .html 文件，并在我的视图控制器中使用以下行设置了 WebView（使用情节提要创建）html 内容：

NSString *path = [[NSBundle mainBundle] pathForResource:@"compose" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:htmlString baseURL:nil];

Edit2：经过一番修修补补，我想我知道发生了什么。似乎在 WebView 的内容高度

【问题讨论】：

标签： html ios css uiwebview

【解决方案1】：

确定 UIWebView 内容高度的唯一真正可靠的方法是在 HTML 完全呈现后通过 Javascript 进行。

在webViewDidFinishLoad: 中获取高度的问题是，在将 HTML 加载到 UIWebView 之后立即调用此方法。但这并不意味着 HTML 已经完全呈现。这可能会导致随机和错误的高度。

因此，要获得真正的高度，您必须在 HTML DOM 中监听 onLoad 事件。然后将高度发送到 UIWebView。

您可以在我不久前写的blog post 中找到有关如何执行此操作的详细说明。

编辑：

所以这是一种特殊情况，HTML 内容实际上小于 UIWebView 框架。在这种情况下，获取<body> 的高度不起作用，因为主体总是延伸到整个框架。

您必须稍微更改一下 HTML。您必须添加一个包含 HTML 内容的元素：

<body>
    <div id="wrapper">
       <div id="content" contenteditable="true"> </div>
       <div style="font-family: Helvetica"> Sample text </div>
    </div>
</body>

然后在 Javascript sn-p 中返回该包装元素的高度：

<script type="text/javascript">
   window.onload = function() { 
      window.location.href = "ready://" + document.getElementById('wrapper').offsetHeight;
   }
</script>

这会返回您的 HTML 内容的正确高度。更重要的是：因为<body> 元素获得了默认边距，所以您必须将边距设置为 0：

<style type="text/css">
    body {
       margin:0;
       color: purple;
       background-color: #d8da3d;
    }
</style>

现在你得到了正确的尺寸，你可以根据 UIWebView 的高度移动你的标签。

【讨论】：

我确实关注了您博客上的帖子，它看起来确实很有用。问题是它似乎仍然返回 532px 的高度。问题是我已经向位于 UIBrowserView 下方的 WebView 的 ScrollView 添加了一个子视图。理想情况下，我希望 UIBrowserView 调整大小以适应其内容，以显示我添加到底部的子视图。
编辑：我在顶部添加了图片，以便更好地说明我遇到的问题。请注意，我已经必须稍微向下滚动才能显示我添加的子视图.在其默认位置，UIBrowserView 的高度会占据屏幕的高度，导致红色标签被推到视野之外。
你是对的，body总是得到UIWebView的最小高度。请参阅我编辑的解决方案答案。

【解决方案2】：

试试这个

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


    NSLog(@"%f",aWebView.scrollView.contentSize.height);

    CGRect frame = aWebView.frame;
    frame.size.height = aWebView.scrollView.contentSize.height;
    aWebView.frame = frame;
}

【讨论】：

基本上，我正在做的一件事就是在 WebView 的滚动视图中添加一个子视图（我已经创建了 UIWebView 的子类）。我的目标是修改 UIBrowserView 的高度。