iOS開發(fā)教程之WKWebView與JS的交互

更新時間：2019年07月02日 08:35:43 作者：iOS_xuanhe

這篇文章主要給大家介紹了關(guān)于iOS開發(fā)教程之WKWebView與JS的交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

iOS8以后,Apple公司推出了WKWebView,對比之前的UIWebView不論是處理速度還是內(nèi)存性能,都有了大幅度的提升!

那么下面我就分享一下WKWebView與JS的交互.

首先使用WKWebView.你需要導(dǎo)入WebKit #import

然后初始化一個WKWebView,設(shè)置代理,并且執(zhí)行代理的方法.在網(wǎng)頁加載成功的時候,我們會調(diào)用一些JS代碼對網(wǎng)頁進行設(shè)置.

WKWebView的代理一共有三個:WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler

1.WKWebView調(diào)用JS方法

 /**
   iOS調(diào)用js里的navButtonAction方法并傳入兩個參數(shù)

   @param 'Xuanhe' 傳入的參數(shù)
   @param 25 傳入的參數(shù)
   @return completionHandler 回調(diào)
   */
 [self.webView evaluateJavaScript:@"navButtonAction('Xuanhe',18)" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
   NSLog(@"response:%@,error:%@",response,error);
 }];

網(wǎng)頁加載完成

//網(wǎng)頁加載完成
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
  //設(shè)置JS
  NSString *js = @"document.getElementsByTagName('h1')[0].innerText";
  //執(zhí)行JS
  [webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    NSLog(@"value: %@ error: %@", response, error);

  }];
}

通過以上操作就成功獲取到h1標(biāo)簽的文本內(nèi)容了.如果報錯,可以通過error進行相應(yīng)的錯誤處理.

2.加載JS代碼

創(chuàng)建WKWebView,并在創(chuàng)建時向JS寫入內(nèi)容.

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH) configuration:config];
webView.navigationDelegate = self;
webView.UIDelegate = self;
  
//獲取HTML上下文的第一個h2標(biāo)簽,并寫入內(nèi)容 
NSString *js = @"document.getElementsByTagName('h2')[0].innerText = '這是一個iOS寫入的方法'";
WKUserScript*script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[config.userContentController addUserScript:script];
  
[self.view addSubview:webView];

調(diào)用JS方法:

  [[webView configuration].userContentController addScriptMessageHandler:self name:@"show"];

遵循代理WKScriptMessageHandler后,調(diào)用JS的方法show;

實現(xiàn)WKScriptMessageHandler代理方法,調(diào)用JS方法后的回調(diào),可以獲取到方法名,以及傳遞的數(shù)據(jù):

//js傳遞過來的數(shù)據(jù)
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
  NSLog(@"%@",message.name);//方法名
  NSLog(@"%@",message.body);//傳遞的數(shù)據(jù)
}

獲取JS彈窗信息

遵循WKUIDelegate代理,實現(xiàn)相關(guān)代理方法:

// alert
//此方法作為js的alert方法接口的實現(xiàn)，默認(rèn)彈出窗口應(yīng)該只有提示信息及一個確認(rèn)按鈕，當(dāng)然可以添加更多按鈕以及其他內(nèi)容，但是并不會起到什么作用
//點擊確認(rèn)按鈕的相應(yīng)事件需要執(zhí)行completionHandler，這樣js才能繼續(xù)執(zhí)行
////參數(shù) message為 js 方法 alert() 中的-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
  [alertController addAction:([UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    completionHandler();
  }])];
  [self presentViewController:alertController animated:YES completion:nil];
}
// confirm
//作為js中confirm接口的實現(xiàn)，需要有提示信息以及兩個相應(yīng)事件， 確認(rèn)及取消，并且在completionHandler中回傳相應(yīng)結(jié)果，確認(rèn)返回YES， 取消返回NO
//參數(shù) message為 js 方法 confirm() 中的-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
  
  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
  [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
    completionHandler(NO);
  }])];
  
  [alertController addAction:([UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    completionHandler(YES);
  }])];
  
  [self presentViewController:alertController animated:YES completion:nil];
}

// prompt
//作為js中prompt接口的實現(xiàn)，默認(rèn)需要有一個輸入框一個按鈕，點擊確認(rèn)按鈕回傳輸入值
//當(dāng)然可以添加多個按鈕以及多個輸入框，不過completionHandler只有一個參數(shù)，如果有多個輸入框，需要將多個輸入框中的值通過某種方式拼接成一個字符串回傳，js接收到之后再做處理
//參數(shù) prompt 為 prompt(,);中的//參數(shù)defaultText 為 prompt(,);中的-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
  
  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
  [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
    textField.text = defaultText;
  }];
  
  [alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    completionHandler(alertController.textFields[0].text?:@"");
  }])];
  [self presentViewController:alertController animated:YES completion:nil]; 
}

demo地址

還有一些其他的跳轉(zhuǎn)代理,我將新開文章來解釋.

其他拓展: Webview點擊圖片查看大圖

大家都知道，WKWebview里面并沒有查看網(wǎng)頁大圖的屬性或者方法的，所以只能通過js與之交互來實現(xiàn)這一功能.基本原理是:通過JS獲取頁面所有的圖片,把這些圖片村到數(shù)組中,給圖片添加點擊事件,通過下標(biāo)顯示大圖即可.

首先創(chuàng)建WKWebView:

 NSString *url = @"http://tapi.mukr.com/mapi/wphtml/index.php?ctl=app&act=news_detail&id=VGpTSDhkemFVb3Y4Y3JXTFdRR2J4UT09";
  WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, kNavBarH, kScreenW, kScreenH-kNavBarH)];
  webView.navigationDelegate = self;
  [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:url]]];
  [self.view addSubview:webView];
  self.webView = webView;

加載完成后,通過注入JS方法,獲取所有圖片數(shù)據(jù)

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
  [webView xh_getImageUrlWithWebView:webView];
}

注入的JS代碼,是自己寫在移動端的,可以根據(jù)需要自己修改,當(dāng)前前提是你要回前端的代碼.

- (NSArray *)xh_getImageUrlWithWebView:(WKWebView *)webView{
  //js方法遍歷圖片添加點擊事件返回圖片個數(shù)
  static NSString * const jsGetImages =
  @"function getImages(){\
  var objs = document.getElementsByTagName(\"img\");\
  var imgUrlStr='';\
  for(var i=0;i<objs.length;i++){\
  if(i==0){\
  if(objs[i].alt==''){\
  imgUrlStr=objs[i].src;\
  }\
  }else{\
  if(objs[i].alt==''){\
  imgUrlStr+='#'+objs[i].src;\
  }\
  }\
  objs[i].onclick=function(){\
  if(this.alt==''){\
  document.location=\"myweb:imageClick:\"+this.src;\
  }\
  };\
  };\
  return imgUrlStr;\
  };";
  
  //用js獲取全部圖片
  [webView evaluateJavaScript:jsGetImages completionHandler:nil];
  
  NSString *js2 = @"getImages()";
  __block NSArray *array = [NSArray array];
  [webView evaluateJavaScript:js2 completionHandler:^(id Result, NSError * error) {
    NSString *resurlt = [NSString stringWithFormat:@"%@",Result];
    if([resurlt hasPrefix:@"#"]){
      resurlt = [resurlt substringFromIndex:1];
    }
    array = [resurlt componentsSeparatedByString:@"#"];
    [webView setMethod:array];
  }];
  return array;  
}

在點擊圖片的時候,把返回的字符串分隔為數(shù)組,數(shù)組中每個數(shù)據(jù)都是一張圖片地址.

再通過循環(huán)方法找到點擊的是第幾張圖片.

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
  
  [self showBigImage:navigationAction.request];
  
  decisionHandler(WKNavigationActionPolicyAllow);
}

- (void)showBigImage:(NSURLRequest *)request {
  NSString *str = request.URL.absoluteString;
  if ([str hasPrefix:@"myweb:imageClick:"]) {
    NSString *imageUrl = [str substringFromIndex:@"myweb:imageClick:".length];
    NSArray *imgUrlArr = [self.webView getImgUrlArray];
    NSInteger index = 0;
    for (NSInteger i = 0; i < [imgUrlArr count]; i++) {
      if([imageUrl isEqualToString:imgUrlArr[i]]){
        index = i;
        break;
      }
    }
    NSLog(@"im");
  }
}

拿到點擊的圖片,也就是當(dāng)前圖片,也拿到所有的圖片數(shù)組,就可以進行圖片預(yù)覽了.

UIWebView的點擊圖片方法和WKWebView方法類似,只不過是,注入的JS的代碼,略微不同,返回的數(shù)組中最后一個數(shù)據(jù)就是當(dāng)前圖片.

demo地址

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: