iOS与JS交互-----WKWebView

在iOS与JS的交互中，主要用到两个方法：-(void)evaluateJavaScript:completionHandler:，负责iOS调用JS；

-(void)userContentController:didReceiveScriptMessage:，接收JS发出消息的name进行捕捉回调

初始化

- (void)configWKWebView{
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = [[WKUserContentController alloc] init];
    WKUserContentController *userCC = config.userContentController;
    //注册JS传递回调的方法名
    [userCC addScriptMessageHandler:self name:js_showMessage];
    [userCC addScriptMessageHandler:self name:js_ChangedMessage];
    
    
    self.wkWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
    self.wkWebView.UIDelegate = self;
    self.wkWebView.navigationDelegate = self;
    [self.view addSubview:self.wkWebView];
    NSURL *path = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:path];
    [self.wkWebView loadRequest:request];
}

iOS调用JS

JS代码注入:

//首先在上面的初始化方法中添加下面的注入代码
//JS注入
    NSString *scriptString = @"function scriptF(){alert('执行JS注入代码');}";
    WKUserScript *script = [[WKUserScript alloc]initWithSource:scriptString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [self.wkWebView.configuration.userContentController addUserScript:script];

使用按钮的事件监听方法进行调用JS:

-(void)btnClicked
{    
    //调用JS注入代码
    [self.wkWebView evaluateJavaScript:@"scriptF()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
                NSLog(@"%@ %@",response,error);
            }];
}

image.png

也可以直接调用

-(void)btnClicked
{
    NSMutableString *performJSString = [NSMutableString string];
    [performJSString appendString:@"alert('JS被OC调用');"];
    [performJSString appendString:@"document.getElementById('button2').style.backgroundColor='blue';"];
    [performJSString appendString:@"document.getElementById('button1').style.backgroundColor='red';"];
    [performJSString appendString:@"document.getElementById('button2').innerHTML='我被OC调用了';"];


    //执行JS代码
    [self.wkWebView evaluateJavaScript:performJSString completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"response: %@ error: %@", response, error);
    }];
    
//    //调用JS函数
//    [self.wkWebView evaluateJavaScript:@"buttonOCCallJS()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
//        NSLog(@"%@ %@",response,error);
//    }];
    
}

image.png

image.png

JS调用iOS

在OC代码中

1.在初始化方法中注册JS回调的方法名

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = [[WKUserContentController alloc] init];
    WKUserContentController *userCC = config.userContentController;
    //注册JS传递回调的方法名
    [userCC addScriptMessageHandler:self name:js_showMessage];
    [userCC addScriptMessageHandler:self name:js_ChangedMessage];
    self.wkWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

2.在【userContentController:didReceiveScriptMessage】方法接收对应消息事件

-(void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
{
  NSLog(@"message.body：%@",message.body);
  
  if([message.name isEqualToString:js_showMessage]) {
      UIAlertView *alerView = [[UIAlertView alloc]initWithTitle:nil message:@"JS调用OC" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:nil];
      [alerView show];
      [self itemClicked];
      if ([message.body isKindOfClass:[NSString class]]) {
          [_item setTitle:message.body forState:UIControlStateNormal];
      }
  }else if ([message.name isEqualToString:js_ChangedMessage] ){
      [self itemClicked];
      if ([message.body isKindOfClass:[NSString class]]) {
          [_item setTitle:message.body forState:UIControlStateNormal];
      }
  }
}

在HTML代码中

buttonJSCallOC()：
为HTML的按钮对应的点击函数

    function buttonJSCallOC(){

        var inputValue = document.getElementById("input").value;
        window.webkit.messageHandlers.showMessage.postMessage(inputValue);
    }

iOS与JS交互.gif

iOS_JS_Demo