首页 > 系统 > iOS > 正文

iOS WKWebView js交互

2019-11-06 10:03:47
字体:
来源:转载
供稿:网友

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;            }                    }     }];}


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表