JS与OC-WebView交互总结

字数 735阅读 508

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方法注入及交互传值

推荐阅读更多精彩内容