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