H 5 jsとiOS WKWebViewのインタラクション

WKWebViewのメリット
1 HTML 5の機能をより多くサポート2公式に発表された60 fpsまでのスクロール・リフレッシュ率と内蔵ジェスチャー3 UIWebViewDelegateとUIWebViewを14種類と3つのプロトコルに分割し、従来は4 Safariと同じJavaScriptエンジン5を実現するのに不便だった多くの機能がより少ないメモリを消費
クラス#クラス#

    WKBackForwardList:        web      ，               。
    WKBackForwardListItem: webview             。
    WKFrameInfo:            。
    WKNavigation:              。
    WKNavigationAction:               ，            。
    WKNavigationResponse:                   ，            。
    WKPreferences:      webview      。
    WKProcessPool:      web      。
    WKUserContentController:      JavaScript post       script    。
    WKScriptMessage:          。
    WKUserScript:               。
    WKWebViewConfiguration:     webview    。
    WKWindowFeatures:              。

プロトコル

    WKNavigationDelegate:                                         。
    WKScriptMessageHandler:               。
    WKUIDelegate:                 。

ロードモード

 //   
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
 [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
 [self.view addSubview:webView];

 //   
 WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
 webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
 [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
 [self.view addSubview:webView];

プロトコル方法の説明

 #pragma mark - WKNavigationDelegate
 //          
 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {

 }
 //           
 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {

 }
 //           
 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

 }
 //          
 - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {

 }
 //               
 - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation {

 }
 //       ，      
 - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {

 NSLog(@"%@",navigationResponse.response.URL.absoluteString);
 //    
 decisionHandler(WKNavigationResponsePolicyAllow);
 //     
 //decisionHandler(WKNavigationResponsePolicyCancel);
 }
 //        ，      
 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

 NSLog(@"%@",navigationAction.request.URL.absoluteString);
 //    
 decisionHandler(WKNavigationActionPolicyAllow);
 //     
 decisionHandler(WKNavigationActionPolicyCancel);
 }
 #pragma mark - WKUIDelegate
 //       WebView
 - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
 return [[WKWebView alloc]init];
 }
 //    
 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
 completionHandler(@"http");
 }
 //    
 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
 completionHandler(YES);
 }
 //    
 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
 NSLog(@"%@",message);
 completionHandler();
 }

ObjcとJSのインタラクション
WKWebViewのUIdelegateは、JSのalert,confirm,promptメソッドをフロントエンドで容易にブロックできる3つのプロトコルメソッドを提供しています.それ以外に、ObjcとJSは以下のように相互に呼び出すことができる.
1.Objc呼び出しJS
iOS側がJSにデータを送信したい場合は、次の方法を呼び出して送信する必要があります.

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

//  Objc  JS    setName

[self.webView evaluateJavaScript:@"setname('  ')" completionHandler:^(id obj, NSError *error) {
        
}];

//   setname JS      ，    ‘  ’   JS   。   setname        json  array      ，    format      string  ,   evaluate  。  

NSString * para = [NSString stringWithFormat:@"setname('%@')", json];
[self.webView evaluateJavaScript:para completionHandler:^(id obj, NSError *error) {
        
}];

2.JS呼び出しObjc
JS側がObjcにいくつかのデータを送信するには、次の方法を呼び出して送信する必要があります.この場合、WKScriptMessageHandlerが使用されます.

//  .m     
 @property (nonatomic ,strong)WKUserContentController * userCC;

//1   WKScriptMessageHandler  
//2    
   WKWebViewConfiguration * config = [[WKWebViewConfiguration alloc]init];

 self.wkWebViw = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];

 [self.wkWebViw loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.webPageUrl]]];

 [self.view addSubview:self.wkWebViw];

 self.userCC = config.userContentController;

 [self.userCC addScriptMessageHandler:self name:@"callOSX"];

 //        JS callFunction    

 [self.userCC addScriptMessageHandler:self name:@"callFunction"];

 // JS  callFunction         ， WKScriptMessageHandler                

 #pragma mark  WKScriptMessageHandler delegate
 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//      ， message.name     （‘    callFunction’）， message.body  JS         
    if ([message.name isEqualToString:@"callFunction"]) {
        //NSLog(@"JS     ：%@", message.body);
    }
 }

//  ， VC         handler  
- (void)dealloc {
    [_userContentController removeScriptMessageHandlerForName:@"callFunction"];
}

対応するJSコード

  


       function buttonClick(string){
       //JS  OC,     
       //（window.webkit.messageHandlers.Method_Name.postMessage(parameterToOC)）
              window.webkit.messageHandlers.callFunction.postMessage(string)
        }