1:設(shè)置代理
@interface WkWebViewController ()<WKNavigationDelegate,WKUIDelegate>//網(wǎng)頁內(nèi)容 _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, kScreenWidth - 64, kScreenHeight)]; _webView.userInteractionEnabled = YES; _webView.navigationDelegate = self; _webView.UIDelegate = self;2:實(shí)現(xiàn)代理方法。假設(shè)需要交互的是,在webview界面,點(diǎn)擊包含圖片的a標(biāo)簽,需要彈出圖片瀏覽并保存的功能。
a標(biāo)簽的顯示為:
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。根據(jù)要求,點(diǎn)擊A標(biāo)簽需要彈出對應(yīng)圖片,并瀏覽文章所有的圖片和保存本地的功能。
#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"]) {//主頁面加載內(nèi)容 decisionHandler(WKNavigationActionPolicyAllow);//允許跳轉(zhuǎn) } else if([strRequest containsString:@"bytedance://large_image"]){//截獲頁面里面的鏈接點(diǎn)擊 //do something you want decisionHandler(WKNavigationActionPolicyCancel);//不允許跳轉(zhuǎn) NSLog(@"%@",strRequest); NSRange range = [strRequest rangeOfString:@"index="]; NSString *indexStr = [strRequest substringFromIndex:range.location+range.length]; [self showBigPicWithIndex:[indexStr integerValue]]; }else{ //截獲頁面里面的鏈接點(diǎn)擊 //do something you want decisionHandler(WKNavigationActionPolicyCancel);//不允許跳轉(zhuǎn) } }-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{ if (!navigationAction.targetFrame.isMainFrame) { [webView loadRequest:navigationAction.request]; } return nil; }至此,完成了交互。對于點(diǎn)擊圖片查看大圖,使用的第三方框架SDPhotoBrowser。
//self.picPathURLArray:從返回的數(shù)據(jù)中拿到所有圖片的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時,使用的懶加載的方法,滾動到即將出現(xiàn)圖片的位置時,圖片再顯示出來。節(jié)省省流量并節(jié)省加載時間。需要與后臺js數(shù)據(jù)進(jìn)行交互,傳遞一個實(shí)時偏移量,讓寫js代碼的實(shí)現(xiàn)。#pragma mark - 懶加載-滾動到圖片的時候,圖片再顯示出來。節(jié)省省流量并節(jié)省加載時間// 頁面加載完成之后調(diào)用- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{ //第一次的時候 傳給服務(wù)器屏幕滾動值 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:當(dāng)前已經(jīng)看到的webview的高度。 //獲取頁面高度,并重置webview的frame CGFloat webViewHeight = [result floatValue] + 10.0; //記錄wkwebview內(nèi)容新舊高度 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; } } }];}
新聞熱點(diǎn)
疑難解答
圖片精選