美文网首页
WKWebView_OC与JS方法互相调用

WKWebView_OC与JS方法互相调用

作者: ImmortalSummer | 来源:发表于2021-04-25 22:26 被阅读0次

    oc调用js方法

    evaluateJavaScript: completionHandler:

    h5页面中有如下js方法

    function sayHello(name){
      let message = 'hello,'+name+'!!!'
      alert(message)
      console.log(message)
      return message
    }
    

    在WKWebView中通过oc调用这个js方法:

    -(void)runJSFunction{
        NSString *name = @"tom";
        NSString *jsFunctionStr = [NSString stringWithFormat:@"sayHello('%@');",name]; //@"sayHello('tom');"
        [self.webView evaluateJavaScript:jsFunctionStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@ - %@",result, [result class]);  //打印结果:hello,tom!!! - __NSCFString
        }];
    }
    

    js调用oc方法

    假设 原生端向前端提供了一个方法名为ocTestFunction的方法, 前端与原生端的通信过程如下.

    原生端
    // handler 为实现了 WKScriptMessageHandler协议的对象
    ScriptMessageHandler *handler = [ScriptMessageHandler new];
    [self.webView.configuration.userContentController addScriptMessageHandler:handler name: ocTestFunction];
    

    注意需要在浏览器释放时移除WKScriptMessageHandler

    -(void)dealloc{    
        // 移除js交互引用
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:ocTestFunction];
    }
    

    前端js调用的格式:
    window.webkit.messageHandlers.nativeFunctionName.postMessage

    function jsToOcWithPrams(message) {
      window.webkit.messageHandlers.ocTestFunction.postMessage({
        body:{
          "func" : "sayHello",
          "data" : {"message" : message}
        }
      })
    }
    

    实现了 WKScriptMessageHandler协议的对象需要实现以下方法:
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

    -(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
        //jsToOcNoPrams/jsToOcWithPrams
        
        // message.name  message.body
        NSLog(@"name:%@\n body:%@\n frameInfo:%@\n",message.name,message.body,message.frameInfo);
        
        //用message.body获得JS传出的参数体
        NSDictionary *parameter = message.body;
        NSString *functionName = parameter[@"func"];
        NSDictionary *functionPrams = parameter[@"data"];
        
        if ([functionName isEqualToString:@"sayHello"]) {
            [self alertMessage:[NSString stringWithFormat:@"hello, %@",functionPrams[@"message"]]];
        }
    }
    

    js注入

    在webview初始化时, 向webView注入一个js方法, 这样前端页面都可以访问这个js方法了

    NSString *jSString = @"function  testFunction() { console.log('hello 2'); alert('this si test function'); }";
    WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jSString injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [config.userContentController addUserScript:wkUScript];
    

    相关文章

      网友评论

          本文标题:WKWebView_OC与JS方法互相调用

          本文链接:https://www.haomeiwen.com/subject/gaulrltx.html