iOS開発教程のWKWebViewとJSの相互作用

前言
iOS 8以降、AppleはWKWebViewを発売しました。これまでのUICWebViewと比べて処理速度やメモリ性能も大幅に向上しました。
それでは、WKWebViewとJSの相互作用を共有します。
まずWKWebViewを使います。WebKit嗳importを導入してください。
WKWebViewを初期化して、代理を設定し、代理の方法を実行します。ウェブページのロードが成功した時、いくつかのJSコードを呼び出してウェブページを設定します。
WKWebViewの代理は全部で三つあります。WKUIDelegate、WKNavigationDelegate、WKScript Message Handler。
1.WKWebView JSメソッドを呼び出す

 /**
   iOS  js  navButtonAction         

   @param 'Xuanhe'      
   @param 25      
   @return completionHandler   
   */
 [self.webView evaluateJavaScript:@"navButtonAction('Xuanhe',18)" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
   NSLog(@"response:%@,error:%@",response,error);
 }];

ページの読み込み完了

//      
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
  //  JS
  NSString *js = @"document.getElementsByTagName('h1')[0].innerText";
  //  JS
  [webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    NSLog(@"value: %@ error: %@", response, error);

  }];
}

以上の操作でh 1ラベルのテキスト内容を取得できました。エラーが発生したら、errorによって対応するエラー処理ができます。
2.JSコードのロード
WKWebViewを作成し、作成時にJSに内容を書き込みます。

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

JSメソッドを呼び出します

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

WKScript Message Handlerを代理した後、JSの方法ショーを呼び出します。
WKScript Message Handlerエージェント方法を実現し、JSメソッドを呼び出した後のコールバックは、メソッド名と転送データを取得することができます。

//js       
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
  NSLog(@"%@",message.name);//   
  NSLog(@"%@",message.body);//     
}

JSポップアップ情報を取得する
WKUIDelegateエージェントに従って、関連代理方法を実現する。

// alert
//     js alert       ，                     ，                ，           
//               completionHandler，  js      
////   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:@"  " style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    completionHandler();
  }])];
  [self presentViewController:alertController animated:YES completion:nil];
}
// confirm
//  js confirm     ，               ，      ，   completionHandler       ，    YES，     NO
//   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:@"  " style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    completionHandler(YES);
  }])];
  
  [self presentViewController:alertController animated:YES completion:nil];
}

// prompt
//  js prompt     ，              ，           
//                 ，  completionHandler      ，        ，                           ，js         
//   prompt   prompt(,);  //  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アドレス
他にもいくつかのジャンプエージェントがあります。
その他の開拓：Webviewクリックして写真を見てください。
WKWebviewでは、Webページのプロパティや方法を確認していないので、jsとの相互作用によってのみこの機能を実現することができます。基本的な原理は、JSを通じてページのすべての画像を取得し、これらの写真村を配列に追加し、写真にクリックを追加し、下付きで大図を表示すればいいです。
まず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メソッドを注入することにより、すべての画像データを取得します。

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

注入されたJSコードは、自分がモバイル端末に書いたもので、必要に応じて自分で修正できます。

- (NSArray *)xh_getImageUrlWithWebView:(WKWebView *)webView{
  //js                  
  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;  
}

画像をクリックすると、返された文字列を配列に分けて、配列の中のデータはすべて1枚の写真の住所です。
また循環法でクリックしたのは何枚目の写真ですか？

- (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");
  }
}

クリックした画像、つまり現在の画像を持ってきて、すべての写真配列を持っていけば、画像のプレビューができます。
UICWebViewのクリック画像の方法はWKWebViewの方法と似ています。ただ、注入されたJSのコードはちょっと違っています。帰った配列の中で最後のデータは現在の画像です。
demoアドレス
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考学習価値を持ってほしいです。ありがとうございます。