OC和JS交互

可以通过以下几种方式进行交互

1. 拦截url（适用于UIWebView和WKWebView）
2. JavaScriptCore（只适用于UIWebView，iOS7+）
3. WKScriptMessageHandler（只适用于WKWebView，iOS8+）
4. WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架）
5. Cordova框架，这个有点🤮这里就不做介绍了

UIWebView和JS交互

UIWebView和JS交互.png

1. 直接URL拦截

• oc调用JS直接调用方法即可

// document.title： 你需要监听的`JS`
[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];

• JS调用OC

通过UIWebView的代理方法来拦截进行自定义

// 加载所有请求数据, 以及控制是否加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSLog(@"request = %@",request);
    // 路由能力 --
    NSLog(@"URL = %@",request.URL.pathComponents);
    NSLog(@"scheme = %@",request.URL.scheme);
    NSString *scheme = request.URL.scheme;
      if ([scheme isEqualToString:@"lgedu"]) {
          NSLog(@"------------");
          NSArray *arr = request.URL.pathComponents;
          NSLog(@"---------%@", arr);
          
          if (arr.count) {
              NSString *methodName = arr[1];
              if ([methodName isEqualToString:@"getSum"]) {
                  // array[2],array[3]
                  NSLog(@"%@-%@",arr[2],arr[3]);
              }
              // 调用OC方法
              // arr 传递的方法参数
              [self performSelector:@selector(getSum:) withObject:arr afterDelay:0];
          }
        return NO;
    }
    return YES;
}
- (void)getSum:(id)str {
    NSLog(@"-------getSum: %@", str);
}

2. 通过JavaScriptCore oc调用JS**

1. [jsContext evaluateScript]
2. [jsContext callWithArguments]

JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 // OC调用JS
[jsContext evaluateScript:@"showAlert()"];

• JS调用OC

  __weak typeof(self) weakSelf = self;
    
    // 传递参数arr
    [self.jsContext evaluateScript:@"var arr = ['aaaa', 'bbbb', 'cccc', '哈哈']"];
    // 异常处理
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        context.exception = exception;
        NSLog(@"exception == %@",exception);
        NSLog(@"%@",context);
    };
    // JS调用OC
    self.jsContext[@"showMessage"] = ^{
        // 参数 (JS 带过来的)
         NSArray *args = [JSContext currentArguments];
         NSLog(@"args = %@",args);
         NSLog(@"currentThis   = %@",[JSContext currentThis]);
         NSLog(@"currentCallee = %@",[JSContext currentCallee]);
         
         // OC调用JS
         NSDictionary *dict = @{@"name":@"zain", @"age":@18};
         [[JSContext currentContext][@"ocCalljs"] callWithArguments:@[dict,@"咸鱼"]];
    };
    // JS调用OC
    self.jsContext[@"showDict"] = ^{
        
        NSArray *arr = [JSContext currentArguments];
        NSLog(@"----->%@", arr);
    };
    // 获取变量
    JSValue *arrValue = self.jsContext[@"arr"];
    NSLog(@"arrValue == %@",arrValue);
    
    // JS 操作对象
    YY_JSObject *yyObject = [[YY_JSObject alloc] init];
    self.jsContext[@"yyObject"] = yyObject;
    NSLog(@"yyObject == %d",[yyObject getSum:10 num2:20]);
    
    // 打开相册
    self.jsContext[@"getImage"] = ^() {
        weakSelf.imagePicker = [[UIImagePickerController alloc] init];
        weakSelf.imagePicker.delegate = weakSelf;
        weakSelf.imagePicker.allowsEditing = YES;
        weakSelf.imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        [weakSelf presentViewController:weakSelf.imagePicker animated:YES completion:nil];
    };

WKWebView和JS交互

WKWebView和JS交互.png

• oc调用JS直接调用方法即可

    // OC调用JS
    NSString *jsStr = @"showAlert('messageHandle: OC调用JS')";
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id result, NSError * _Nullable error) {
        NSLog(@"%@----%@",result, error);
    }];

• JS调用OC

web端写法

window.webkit.messageHandlers.<方法名>.postMessage(<数据>)

OC写法

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"messgaeOC"];
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"messgaeOC"];
}

#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
   
    // 拦截JS
    if (message.name) {
        // OC 实现
    }
    NSLog(@"message == %@ --- %@",message.name,message.body);
}

WebViewJavascriptBridge

WebViewJavascriptBridge地址及用法

最后送上Demo地址