在 UIPopoverController 内的 UIWebView 中显示 Wiki 移动页面

Question

我尝试通过 UIPopoverController 中的 UIWebView 打开 wiki 移动版网页。问题是，无论我如何设置 contentSizeForViewInPopover，或者只是 UIWebView 框架，或者只是设置 UIWebView.scalesPageToFit = YES。 Wiki 移动版页面内容大小似乎比我的 UIWebView 大。但如果我在iPhone上使用，就没有这个问题。这是我的弹出窗口控制器的代码：

//create a UIWebView UIViewController first
WikiViewController *addView = [[WikiViewController alloc] init];
addView.contentSizeForViewInPopover = CGSizeMake(320.0, 480.0f);

//then create my UIPopoverController
popover = [[UIPopoverController alloc] initWithContentViewController:addView];
popover.delegate = self;
[addView release];

//then get the popover rect
CGPoint pointforPop = [self.mapView convertCoordinate:selectAnnotationCord 
                                        toPointToView:self.mapView];
CGRect askRect = CGRectMake((int)pointforPop.x, (int)pointforPop.y+10, 1.0, 1.0);
[popover presentPopoverFromRect:askRect 
                         inView:self.mapView 
       permittedArrowDirections:UIPopoverArrowDirectionRight animated:YES];
[self.mapView deselectAnnotation:annotation animated:YES];

这是我创建 UIWebView 的代码：

- (void)viewDidLoad
{
 wikiWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 480.0f)];
 wikiWebView.scalesPageToFit = YES;
 //or No, doesn't matter, it all get larger than this
 wikiWebView.delegate = self;
 self.view = wikiWebView;
}

所有代码似乎都是典型的...... 我想知道是否有人可以给我一些启发，非常感谢。

Answer 1

这是auco答案的增强版本，如果视口元标记不存在，则会添加它：

- (void)webViewDidFinishLoad:(UIWebView*)webView
{
    int webviewWidth = (NSUInteger)webView.frame.size.width;

    if (!webView.loading) {

        NSString *jsCmd = [NSString stringWithFormat:@"try {var viewport = document.querySelector('meta[name=viewport]');if (viewport != null) {viewport.setAttribute('content','width=%ipx, initial-scale=1.0, user-scalable=1');} else {var viewPortTag=document.createElement('meta');viewPortTag.id='viewport';viewPortTag.name = 'viewport';viewPortTag.content = 'width=%ipx, initial-scale=1.0, user-scalable=1';document.getElementsByTagName('head')[0].appendChild(viewPortTag);}} catch (e) {/*alert(e);*/}", webviewWidth, webviewWidth];

        [webView stringByEvaluatingJavaScriptFromString:jsCmd];
    }
}

这是我们在宽度为320px的WebView中注入的Javascript格式漂亮的代码，

try {
    var viewport = document.querySelector('meta[name=viewport]');
    if (viewport != null) {
        viewport.setAttribute('content',
                'width=320px, initial-scale=1.0, user-scalable=1');
    } else {
        var viewPortTag = document.createElement('meta');
        viewPortTag.id = 'viewport';
        viewPortTag.name = 'viewport';
        viewPortTag.content = 'width=320px,initial-scale=1.0, user-scalable=1';
        document.getElementsByTagName('head')[0].appendChild(viewPortTag);
    }
} catch (e) {
    /*alert(e);*/
} 

您可以删除try/catch，如果您想。

Answer 2

哦，我在另一个QA中发现，有时如果html中有一行“width=device-width”，并且您从popover控制器加载webview，则该popover控制器将自动发送设备宽度，而不是您指定的视图宽度，并且让你的观点变得丑陋和时髦。在那篇文章中，这是一个 jQuery 问题，它用 jQuery 方式解决了。在我的问题中，这只是 wiki 移动版本中的 html 问题。所以我尝试另一种方式，但类似。

我简单地在 webViewdidload 委托方法中添加代码，首先将 URL html 获取到 NSString 中，然后使用 NSString 实例方法在加载的 html 中搜索“device-width”，并将其替换为我的视图宽度以使其成为新的 NSString，然后使用这个新的 NSString 加载此页面。就是这样。

- (void) webViewDidFinishLoad:(UIWebView *)webView
{
if (!alreadyReload) 
{
    NSString *webHTML = [NSString stringWithContentsOfURL:webView.request.URL encoding:NSUTF8StringEncoding error:NULL];
    NSRange range = [webHTML rangeOfString:@"device-width"];
    if ((range.location!=NSNotFound)&&(range.length != 0)) 
    {
        webHTML = [webHTML stringByReplacingOccurrencesOfString:@"device-width" withString:@"whatever width you need" options:0 range:range];
        [webView loadHTMLString:webHTML baseURL:wikiWebView.request.URL];
        alreadyReload = YES;
    }
}
}

像这样的东西。

顺便说一句，由于我只在 wiki 移动版本上使用它，所以 html 很简单，这种比较和替换也很容易。如果你想在更一般的情况下使用它，你可以使用其他方式。

Answer 3

通过 JavaScript 操作设备宽度比在 html 完全加载后更改 html，然后再次使用修改后的 html 重新加载整个页面要高效得多。

这应该可行（并且还要考虑是否有必要更改视口宽度）：

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {
    if(aWebView.frame.size.width < aWebView.window.frame.size.width) {
        // width=device-width results in a wrong viewport dimension for webpages displayed in a popover
        NSString *jsCmd = @"var viewport = document.querySelector('meta[name=viewport]');";
        jsCmd = [jsCmd stringByAppendingFormat:@"viewport.setAttribute('content', 'width=%i, initial-scale=1.0, user-scalable=1');", (NSUInteger)aWebView.frame.size.width];
        [aWebView stringByEvaluatingJavaScriptFromString:jsCmd];
    }
    // stop network indicator
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}