基于webview框架的UIWebview内容

Question

我希望禁用UIWebview内部的滚动条，并根据UIWebview的宽度和高度显示内容。如果内容太大而无法在页面上显示，则应该像UILabel一样在文本末尾显示...。

Flipboard应用程序已经正确实现了这一点，在第一页上显示内容的一部分，当我们捏放缩时，根据高度和宽度显示更多内容。

如何实现这一点？任何有关此事的帮助都将不胜感激。

示例：

我正在iPad上加载此内容

UIWebView *mWebView = [[UIWebView alloc] initWithFrame:CGRectMake(100, 100, 500, 730)];
mWebView.backgroundColor=[UIColor greenColor];
mWebView.userInteractionEnabled=YES;
mWebView.autoresizingMask=YES;
mWebView.delegate = self;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).bounces = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).showsVerticalScrollIndicator = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).scrollEnabled= NO;
[self.view addSubview:mWebView];
[mWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://mobile.washingtonpost.com/c.jsp;jsessionid=E6B119C6EF5A6274030E7B3A9F97D374?item=http%3a%2f%2fwww.washingtonpost.com%2fpolitics%2fobama-gop-leaders-said-to-discuss-new-debt-plan%2f2011%2f07%2f21%2fgIQAT81BSI_mobile.mobile&cid=578815"]]];
[mWebView release];

我希望只显示适合在500x750框架内显示的内容。如屏幕截图所示，最后一行被切断了。

- Anil Sivadas

Answer 1

禁用 UIWebView 的滚动条：

mWebView = [[UIWebView alloc] initWithFrame:CGRectMake(20, 0, 300, 390)];
mWebView.backgroundColor=[UIColor greenColor];
mWebView.userInteractionEnabled=YES;
mWebView.autoresizingMask=YES;
mWebView.delegate = self;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).bounces = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).showsVerticalScrollIndicator = NO;
for (id subview in mWebView.subviews)
    if ([[subview class] isSubclassOfClass: [UIScrollView class]])
        ((UIScrollView *)subview).scrollEnabled= NO;

然后将这个UIWebView添加为您的主UIView的子视图或任何您想要的位置。

每当数据重新加载时，就会调用UIWebView的以下委托方法。因此，请在其中实现动态调整大小的代码。

- (void)webViewDidFinishLoad:(UIWebView *)webview{
   float webHeight;
   CGRect frame = webview.frame;
   frame.size.height = 1;
   webview.frame = frame;
   CGSize fittingSize = [webview sizeThatFits:CGSizeZero];
   frame.size = fittingSize;
   webview.frame = frame;
   webHeight=fittingSize.height;
   rowHt=webHeight;
   [aTableView reloadData];
}

我已经在tableview中添加了UIWebView。因此，我正在调用tableview的reloadData，并将webHeight（新的webview高度）传递给table delegate以设置行高。希望这可以帮助到您。

- stack2012

---

iPhoneFreak，感谢您的建议。但我不能改变我的视图框架来适应内容。例如，假设适合内容的大小为800，我想在高度400中显示它，如果我显示它，则最后一行文字将被垂直剪裁。相反，我想展示一个类似Flipboard中最后一行的省略号。希望您能理解。 - Anil Sivadas

Answer 2

您可以通过使用UIWebViewDelegate方法来获取webView的高度。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    height = [[webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
    webView.frame = CGRectMake(0,0,320,(height + 30));
}

然后使用该代码设置webView框架大小。

- Sisu

---

Sisu，感谢您的回复。但我不想根据内容增加高度或宽度。相反，内容应该显示在Webview框架中。问题是，在大多数情况下，文本将在垂直方向上被切断。 - Anil Sivadas

抱歉Anil Sivadas，我不知道IPad的情况。但是_webView_不会像UILabel一样显示（...）。您可以尝试使用_UIScrollView_。将scrollview框架大小设置为（100, 100, 500, 750），并将_webView_添加为scrollView的子视图。 - Sisu

Sisu，感谢您的建议。Scrollview子视图无法工作。 - Anil Sivadas

你在将UIWebView添加到UIScrollView后遇到了相同的问题吗？你设置了scrollView的内容大小吗？ - Sisu

Answer 3

你可以很容易地使用JavaScript完成这个功能。 我可以给你一个想法，剩下的就是你要实现了。在你的HTML中放置任何标签，比如div标签，在适当的位置，并在此处添加一些信息以供继续阅读。一旦用户点击它，加载下一个div，其中将有另一页的信息。就像我们真正想看到时打开盒子一样。你可以很容易地用JavaScript实现它。

- Praveen-K

Answer 4

Flipboard在呈现数据之前会重新格式化它。要获得相同的效果，您需要做同样的事情。即读取HTML，分离组件，并通过UIWebview与HTML和CSS或在UIKIT中以自己的格式呈现。

UIWebviews不支持带省略号的溢出文本。如果您选择使用CSS，请查看它支持省略号的溢出属性。

- railwayparade