WKWebView 自适应高度 及在UIScrollView上的滑动 缩放

近期boss要我们做一款类似电商的产品,商品详情布局顶部是一些固定的控件,底部是一个webview的图文混排(也有pdf),需要webview自适应高度。这个方法网上一搜一大片:

    WKWebViewConfiguration *config = [WKWebViewConfigurationnew];

    //是否支持JavaScript

    config.preferences.javaScriptEnabled =YES;

   //不通过用户交互,是否可以打开窗口

    config.preferences.javaScriptCanOpenWindowsAutomatically =NO;

    //通过JSwebView内容交互

    config.userContentController = [WKUserContentControllernew];


    _webView = [[WKWebViewalloc]initWithFrame:CGRectMake(0,brief_View.bottom +10,base_Sc.width,0) configuration:config];

    _webView.UIDelegate =self;

    _webView.navigationDelegate =self;

    _webView.scrollView.bounces =NO;

    _webView.scrollView.showsVerticalScrollIndicator = NO;

    _webView.scrollView.showsHorizontalScrollIndicator =NO;

    [base_ScaddSubview:_webView];

    

    NSURL *pathUrl = [NSURLURLWithString:@"url路径"];

    NSURLRequest * request = [[NSURLRequestalloc]initWithURL:pathUrl];

    dispatch_async(dispatch_get_global_queue(0,0), ^{

        [_webViewloadRequest:request];

    });

在代理里面:

#pragma mark - WKNavigationDelegate --

-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation

{

    TLog(@"web.Start==========%f",webView.scrollView.contentSize.height);

}

-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation

{

    TLog(@"web.Commit==========%f",webView.scrollView.contentSize.height);

    dispatch_async(dispatch_get_main_queue(), ^{

        _webView.height = webView.scrollView.contentSize.height;

        base_Sc.contentSize =CGSizeMake(base_Sc.width,_webView.bottom);

    });

}

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecifiedWKNavigation *)navigation

{

    TLog(@"web.End==========%f",webView.scrollView.contentSize.height);

    if (webView.scrollView.contentSize.height < 50(50为内容为空的高度)) {

        [webView reload];//WKWebView经常会出现加载不出来内容的情况,所以判断如果返回内容为空,需要重载(但需要和后台商量:如果本身webview就是空内容,让他们至少给你返回1高度嘛,凡事是可以商量的撒^_^)

    }

    dispatch_async(dispatch_get_main_queue(), ^{

        _webView.height = webView.scrollView.contentSize.height;

        base_Sc.contentSize =CGSizeMake(base_Sc.width,_webView.bottom);

    });

}

-(void)webViewWebContentProcessDidTerminate:(WKWebView *)webView

{

    dispatch_async(dispatch_get_global_queue(0,0), ^{

        [webView reload];

    });

}


另外,WKWebView是不支持缩放的( #if !TARGET_OS_IPHONE ),而在iOS10.0以后,UIWebView控件无法正常加载带pdf的网页内容:会出现以下Log信息,
WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}

WF: _WebFilterIsActive returning: NO  所以iOS10以后只好用WKWebView咯! 

我们看到京东商城上的商品详情页是一个大的webview页面,它是可以缩放的。而淘宝的商品详情页面则是一张一张的图片切割组合而成。那么WKWebView的缩放iOS端应该怎么做呢?其实非常简单。

众所周知,UIScrollView是支持手势缩放的,而且用起来非常方便。那么我们只需要把WKWebView放进UIScrollView的容器里即可:

    webview_Base = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WDITH, 0)];

    webview_Base.backgroundColor = [UIColor clearColor];

    webview_Base.maximumZoomScale = 2.0;

    webview_Base.minimumZoomScale = 1.0;

    webview_Base.zoomScale = 1.0;

    webview_Base.delegate = self;

    webview_Base.multipleTouchEnabled = YES;

    [self.view addSubview:webview_Base];

    //上面有webview的创建方法

    [webview_Base addSubview:_webView];

创建完成后,只需要实现 UIScrollView的delegate即可:

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

    if ([scrollView isEqual:webview_Base]) {

        return _webView;

    }

    return nil;

}

-(void)scrollViewDidZoom:(UIScrollView *)scrollView

{

    if ([scrollView isEqual:webview_Base]) {

        CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?

        (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;

        CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?

        (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;

        _webView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,

                                      scrollView.contentSize.height * 0.5 + offsetY);

    }

}

其实这种方法来源于相册的enlarge大图缩放,当然相册在 UIScrollView外面还包了一层 UICollectionView,来处理滑动越界的问题。


猜你喜欢

转载自blog.csdn.net/joyliyan/article/details/73467156