OC 与 JS 交互 (UIWebView & WKWebView)

iOS8以后，苹果推出了新框架Webkit，提供了替换UIWebView的组件WKWebView。WKWebView 的优势不必多说,这里将两者与 JS 的交互分别做对比.

首先,和前端以及安卓同学定义好一样的方法:
js 调用原生: jsCallNativeDoSomethingWithParams()
原生调用js: nativeCallJSSendParams()

UIWebView 与 JS 的交互
引入库

#import <JavaScriptCore/JavaScriptCore.h>

加载 html

    NSURL *url = [NSURL URLWithString: @"www.baidu.com"];
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL: url];
     //如果需要在加载请求的时候用 post 请求传参数的话,加上下面三句.WKWebView这个方式不行,下面有解决方法
     NSString *body = [NSString stringWithFormat: @"arg1=%@&arg2=%@", @"val1",@"val2"];
    [request setHTTPMethod: @"POST"];
    [request setHTTPBody: [body dataUsingEncoding: NSUTF8StringEncoding]];

    [self.webView loadRequest: request];

js 调用原生的两种方式:

第一种: 采用协议方法
添加协议并遵守

@protocol TestJSExport <JSExport>
- (void)jsCallNativeDoSomethingWithParams:(NSString *) jsonStr;
@end

@interface JSCallOCViewController : UIViewController<UIWebViewDelegate,TestJSExport>

@end

然后再把方法进行关联

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 打印异常
    self.context.exceptionHandler =
    ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
        NSLog(@"异常 %@", exceptionValue);
    };

    // 以 JSExport 协议关联 native 的方法
    self.context[@"native"] = self;
}

#pragma mark - JSExport Methods

- (void)jsCallNativeDoSomethingWithParams:(NSString *) jsonStr
{
    NSLog(@"%@", jsonStr);
}

js 中的相关代码

 <input type="button" value="call native" onclick="native.jsCallNativeDoSomethingWithParams(input.value);" />
            <br/>

第二种,以 block 形式关联

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
     self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 打印异常
    self.context.exceptionHandler =
    ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
        NSLog(@"异常 %@", exceptionValue);
    };
    self.context[@"jsCallNativeDoSomethingWithParams"] =
    ^(NSString *jsonStr)
    {
        NSLog(@"%@", jsonStr);
    };

}

js 相关代码

  <input type="button" value="调用原生" onclick="jsCallNativeDoSomethingWithParams('json');" />

原生调用js

- (void) nativeCallJSSendParams:(NSString *)jsonStr {
    NSNumber *inputNumber = [NSNumber numberWithInteger:[self.textField.text integerValue]];
    JSValue *function = [self.context objectForKeyedSubscript:@"nativeCallJSSendParams"];
    JSValue *result = [function callWithArguments:jsonStr];
    NSString * jsonStr = [NSString stringWithFormat:@"%@", [result toString]];
}

WKWebView 与 JS 的交互

注: WKWebView 有一个bug ,就是第一次在加载 url 的时候是无法使用 post 传参数的,因为请求过程中,请求体会丢失,所以,如果实在需要传值,可以再加载好之后,用原生调用 js 方法传值(下面会有介绍),参考:
https://stackoverflow.com/questions/26253133/cant-set-headers-on-my-wkwebview-post-request

引入库

#import <WebKit/WebKit.h>

继承代理

@interface UIViewController ()<WKNavigationDelegate, WKUIDelegate,WKScriptMessageHandler>

正常加载页面

 - (void)viewDidLoad
{
    [super viewDidLoad];

    [self.view addSubview:self.newsWebView];

    NSURL *url = [NSURL URLWithString: @"你的url"];
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL: url];
    [self.newsWebView loadRequest: request];
}


#pragma mark - WKScriptMessageHandler

//js 调用 原生
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

    NSLog(@"jsCallNativeMessageBody ==> %@", message.body);

    if ([message.name isEqualToString:@"jsCallNativeDoSomethingWithParams"]) {
        [self jsCallNativeDoSomethingWithParams:message.body];
    }
}

//原生 调用 js
- (void) nativeCallJSSendParams:(NSString *)jsonStr {
    //注意:这里得把json字符串去掉空格,回车才可以,不然会报错
    NSString * paramStr = [self noWhiteSpaceString:jsonStr];
    NSString *returnJSStr = [NSString stringWithFormat:@"nativeCallJSSendUserMessage('%@')",paramStr];

    [self.newsWebView evaluateJavaScript:returnJSStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"nativeCallJSSendParams result = %@,error = %@", result, error);
    }];
}

- (NSString *)noWhiteSpaceString: (NSString *)newString {
    newString = [newString stringByReplacingOccurrencesOfString:@"\r" withString:@""];
    newString = [newString stringByReplacingOccurrencesOfString:@"\n" withString:@""];
    newString = [newString stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];      
    newString = [newString stringByReplacingOccurrencesOfString:@" " withString:@""];
      return newString;
}


#pragma mark - getter
- (WKWebView *)newsWebView {
    if (!_newsWebView) {
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = [[WKUserContentController alloc] init];
        [configuration.userContentController addScriptMessageHandler:self name:@"jsCallNativeDoSomethingWithParams"];
        _newsWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
        _newsWebView.UIDelegate = self;
        _newsWebView.navigationDelegate = self;
    }
    return _newsWebView;
}

另外告知前端同学(如果需要的话)添加对应 js 的方式:

    function showMessageFromWKWebViewClick() {            
        window.webkit.messageHandler.nativeCallJSSendParams.postMessage('js调用原生'); 
    }

    function nativeCallJSSendParams(returnStr) {

        document.getElementById("oneEle").value = returnStr;
                    alert(returnStr);
    }