JS与OC-WebView交互总结

OC与JS交互有两种方式，WKWebView和UIWebView,由于UIWebView比较耗内存，性能上不太好，所以苹果在iOS 8中推出了WKWebView。

一、与UIWebView交互

在UIWebView与JS交互中最简单的办法就是拦截URL，根据h5那边约定好的url来判断用户具体进行了什么操作。
代码如下：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{    NSURL *URL = request.URL;    NSString *scheme = [URL scheme];//url可以是单纯字符串，也可以是带参数的url，这样就可以传值给oc，但是需要根据‘&’和‘=’将url拆分获得参数，再进行后续操作
    if ([scheme isEqualToString:@"userLogin"]) {        //此处调用oc原生方法，比如字符串是用户登陆，那就掉用登陆方法
        [self login：URL];        return NO;
    }    return YES;
}

- (void)login:(NSURL *)URL
{    //拆分参数
    NSArray *params =[URL.query componentsSeparatedByString:@"&"];    NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];    for (NSString *paramStr in params) {        NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];        if (dicArray.count > 1) {            NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            [tempDic setObject:decodeValue forKey:dicArray[0]];
        }
    }    // 登陆获取用户id
   NSString *userId =  [self getUserid];    // 传值给js, setUserId是跟js约定好的方法名
    NSString *jsStr = [NSString stringWithFormat:@"setUserId('%@')",userId];
    [self.webView stringByEvaluatingJavaScriptFromString:jsStr];
}

如果回调执行的JS 方法带参数，而参数不是字符串时，不要加单引号,否则可能导致调用JS 方法失败

参考：iOS下JS与OC互相调用（一）--UIWebView 拦截URL

二、与WKWebView交互

目前项目基本都支持ios8以上，建议使用WKWebView，性能更好

1、创建WKWebView

WKWebView有两个navigationDelegate和UIDelegate，拦截URL使用的是navigationDelegate中的代理

- (void)viewDidLoad {
    [super viewDidLoad];    self.view .backgroundColor =[UIColor whiteColor];    
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.preferences = [[WKPreferences alloc] init];
    config.preferences.minimumFontSize = 10;
    config.preferences.javaScriptEnabled = YES;
    config.preferences.javaScriptCanOpenWindowsAutomatically = NO;
   
    config.processPool = [[WKProcessPool alloc] init];    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds
                                      configuration:config];    //记得实现对应协议,不然方法不会实现.
    self.webView.UIDelegate = self;    self.webView.navigationDelegate =self;
    [self.view addSubview:self.webView];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.1.188/index1.html"]]];
}

2、拦截URL交互

用户进行操作后可以用下面方法拦截url来判断用户行为

#pragma mark - WKNavigationDelegate- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{    NSURL *URL = navigationAction.request.URL;    NSString *scheme = [URL scheme];    if ([scheme isEqualToString:@"userLogin"]) {        //跟UIWebView那里一样
        [self login:URL];
        decisionHandler(WKNavigationActionPolicyCancel);        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

调用js的方法变成了下面的方法,执行结果会在block中返回：

[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {        NSLog(@"%@----%@",result, error);
    }];

3、注册方法与JS交互

如果有些参数需要一开始就从OC传值给JS,然后用户点击网页JS才能做出响应，这种情况可以有两种方式解决。

第一种是加载网页时将参数用&拼接起来直接传过去，比如签到页如果是网页，那JS就需要一开始就拿到用户ID来显示用户的签到情况。

第二种比如用户浏览web的商品详情页，当用户点击加入购物车时JS要根据用户登录状态判断是该登陆还是调用加入购物车的接口，那么在用户点击之前OC就需要将用户的登录状态告诉JS。

当然我们也可以将这个判断操作完全交给OC来做，只需要JS告诉OC用户是否点击了加入购物车按钮即可，但如果要交给JS来判断，就可以用下面的方法：
OC注册供JS调用的方法

    config.userContentController = [[WKUserContentController alloc] init];    // **************** 此处划重点 **************** //
    //添加注入js方法, oc与js端对应实现
    [config.userContentController addScriptMessageHandler:self name:@"userLogin"];

加载成功,传递值给JS：

#pragma mark ---------  WKNavigationDelegate  --------------- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{    //获取userId
    //传递userId给 js端
   NSString * userId = [self getUserId];    if (!userId) {
        userId =@"";
    }    NSString * jsStr  =[NSString stringWithFormat:@"sendKey('%@')", userId];
    [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {  //此处可以打印error.
    }];   //js端获取传递值代码实现实例参考
    //function sendKey(user_id){
     //      $("#input").val(user_id);
     //  }}

当用户点击加入购物车，JS根据传入的userid判断用户没登录，调用了前面OC注册的“ userLogin”来进行登录，结果会通过下面方法返回：

//获取注入方法名对象,获取js返回的状态值.#pragma mark - WKScriptMessageHandler- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {    if ([message.name isEqualToString:@"userLogin"]) {        NSDictionary * messageDict = (NSDictionary *)message.body;        if ([messageDict[@"body"] isEqualToString:@"toLogin"]) {            NSLog(@"登录");
        }else{            NSLog(@"正常跳转");            NSLog(@"mess --- id == %@",message.body);
        }
    }
}

JS在调用OC注册方法的时候要用下面的方式：

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

4、在交互中,关于alert (单对话框)函数、confirm(yes/no对话框)函数、prompt(输入型对话框)函数时,实现代理协议 WKUIDelegate ,则系统方法里有三个对应的协议方法.大家可以进入WKUIDelegate 协议类里面查看.下面具体协议方法实现,以供参考.

#pragma mark - WKUIDelegate- (void)webViewDidClose:(WKWebView *)webView {    NSLog(@"%s", __FUNCTION__);
}// 在JS端调用alert函数时，会触发此代理方法。// JS端调用alert时所传的数据可以通过message拿到// 在原生得到结果后，需要回调JS，是通过completionHandler回调- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {    NSLog(@"%s", __FUNCTION__);    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert" message:@"JS调用alert" preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    
    [self presentViewController:alert animated:YES completion:NULL];    NSLog(@"%@", message);
}// JS端调用confirm函数时，会触发此方法// 通过message可以拿到JS端所传的数据// 在iOS端显示原生alert得到YES/NO后// 通过completionHandler回调给JS端- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {    NSLog(@"%s", __FUNCTION__);    
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:@"JS调用confirm" preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(YES);
    }]];
    [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(NO);
    }]];
    [self presentViewController:alert animated:YES completion:NULL];    
    NSLog(@"%@", message);
}// JS端调用prompt函数时，会触发此方法// 要求输入一段文本// 在原生输入得到文本内容后，通过completionHandler回调给JS- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {    NSLog(@"%s", __FUNCTION__);    
    NSLog(@"%@", prompt);    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS调用输入框" preferredStyle:UIAlertControllerStyleAlert];
    [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.textColor = [UIColor redColor];
    }];
    
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler([[alert.textFields lastObject] text]);
    }]];
    
    [self presentViewController:alert animated:YES completion:NULL];
}

参考：
ios js与oc原生WKWebView方法注入及交互传值

作者：乔兰伊雪
链接：https://www.jianshu.com/p/6eee4dec7e36