iOS WKWebView js交互

1:设置代理

@interface WkWebViewController ()<WKNavigationDelegate,WKUIDelegate>

//网页内容
    _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, kScreenWidth - 64, kScreenHeight)];
    _webView.userInteractionEnabled = YES;
    _webView.navigationDelegate = self;
    _webView.UIDelegate = self;

2:实现代理方法。假设需要交互的是，在webview界面，点击包含图片的a标签，需要弹出图片浏览并保存的功能。

a标签的显示为：

bytedance://large_image?url=http://static.lingfo.com/upload/bbs/2017-02-27/c18bc717-d737-4841-90ee-9b93257ea3e5.png&index=0

其中“bytedance://large_image”这个是判断条件。index=0，是显示的第1张图片。中间url=http://....png是图片的链接URL。

根据要求，点击A标签需要弹出对应图片，并浏览文章所有的图片和保存本地的功能。

#pragma mark - WKNavigationDelegate
// 类似 UIWebView的 -webView: shouldStartLoadWithRequest: navigationType:
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSString *strRequest = [navigationAction.request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    if([strRequest isEqualToString:@"about:blank"]) {//主页面加载内容
        decisionHandler(WKNavigationActionPolicyAllow);//允许跳转
        
    } else if([strRequest containsString:@"bytedance://large_image"]){//截获页面里面的链接点击
        //do something you want
        decisionHandler(WKNavigationActionPolicyCancel);//不允许跳转
        NSLog(@"%@",strRequest);
        NSRange range = [strRequest rangeOfString:@"index="];
        NSString *indexStr = [strRequest substringFromIndex:range.location+range.length];
        [self showBigPicWithIndex:[indexStr integerValue]];
    }else{
        //截获页面里面的链接点击
        //do something you want
        decisionHandler(WKNavigationActionPolicyCancel);//不允许跳转
    }
    
}
-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures

{
    if (!navigationAction.targetFrame.isMainFrame) {
        
        [webView loadRequest:navigationAction.request];
        
    }
    return nil;
    
}

至此，完成了交互。

对于点击图片查看大图，使用的第三方框架SDPhotoBrowser。

//self.picPathURLArray:从返回的数据中拿到所有图片的URL链接。
-(void)showBigPicWithIndex:(NSInteger)index
{
    SDPhotoBrowser *brower = [[SDPhotoBrowser alloc]init];
    brower.currentImageIndex = index;
    brower.sourceImagesContainerView = self.webView;
    brower.imageCount = self.picPathURLArray.count;
    brower.delegate = self;
    [brower show];
}
#pragma mark - SDPhotoBrowersDelegate
-(NSURL *)photoBrowser:(SDPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
    NSURL *url = self.picPathURLArray[index];
    return url;
}
-(UIImage *)photoBrowser:(SDPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
    UIImage *image = [UIImage imageNamed:@"image_default"];
    return image;
}

使用WKWebView时，使用的懒加载的方法， 滚动到即将出现图片的位置时，图片再显示出来。节省省流量并节省加载时间。需要与后台js数据进行交互，传递一个实时偏移量，让写js代码的实现。

#pragma mark - 懒加载-滚动到图片的时候，图片再显示出来。节省省流量并节省加载时间
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    //第一次的时候 传给服务器屏幕滚动值
    NSString *param = [NSString stringWithFormat:@"scrollevent('%f')",kScreenHeight];
    [self.webView evaluateJavaScript:param completionHandler:nil];
    YJWeakSelf;
    [_webView evaluateJavaScript:@"document.getElementById(\"content\").offsetHeight;" completionHandler:^(id _Nullable result,NSError * _Nullable error) {//result：当前已经看到的webview的高度。
        
        //获取页面高度，并重置webview的frame
        CGFloat webViewHeight = [result floatValue] + 10.0;
        //记录wkwebview内容新旧高度
        weakSelf.oldWkHeight = webViewHeight;
        weakSelf.newWkHeight = webViewHeight;
        CGRect frame =_webView.frame;
        CGFloat webY = frame.origin.y;
        if (webViewHeight < kScreenHeight-kNavBarHeight) {
            webViewHeight = kScreenHeight-kNavBarHeight;
        }
        frame.size.height = webViewHeight;
        weakSelf.webView.frame = frame;
        //webview的高度加上 webview的y值
        CGFloat contentHeight =  webY + webViewHeight + 35 + 45;
        
        weakSelf.headerView.contentSize = CGSizeMake(kScreenWidth,contentHeight);
        if (contentHeight > kScreenHeight) {
            weakSelf.headerView.showsVerticalScrollIndicator = YES;
            weakSelf.headerView.scrollEnabled = YES;
        }

    }];
    
    
}

#pragma mark - scrollview delegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat useroff = scrollView.contentOffset.y + kScreenHeight;
    NSString *param = [NSString stringWithFormat:@"scrollevent('%f')",useroff];
    [self.webView evaluateJavaScript:param completionHandler:nil];
    
    YJWeakSelf;
    [_webView evaluateJavaScript:@"document.getElementById(\"content\").offsetHeight;" completionHandler:^(id _Nullable result,NSError * _Nullable error) {
        //获取页面高度，并重置webview的frame
        CGFloat webViewHeight = [result floatValue] + 10.0;
        weakSelf.oldWkHeight = weakSelf.newWkHeight;
        weakSelf.newWkHeight = webViewHeight;
        if (weakSelf.oldWkHeight != weakSelf.newWkHeight) {
            CGRect frame = _webView.frame;
            CGFloat webY = frame.origin.y;
            frame.size.height = webViewHeight;
            weakSelf.webView.frame = frame;
            //webview的高度加上 webview的y值
            CGFloat contentHeight = webY + webViewHeight + 35 + 45;
            
            weakSelf.headerView.contentSize = CGSizeMake(kScreenWidth,contentHeight);
            if (contentHeight > kScreenHeight) {
                weakSelf.headerView.showsVerticalScrollIndicator = YES;
                weakSelf.headerView.scrollEnabled = YES;
            }
            
        }
     }];
}