WKWebView JS与OC间相互传值调用-王权伟の博客

写在前面

本文将介绍如何使用WKWebView进行JS与OC、OC与JS间的传值和方法调用。

前置条件

1、导入WebKit.framework

2、声明WKWebView

@interface ViewController ()
@property (nonatomic, strong) WKWebView * webView;

@end

JS调用OC原生方法

1、前端在js文件中实现

这里要注意messageHandlers后面跟着的deviceInfo要与原生的定义的一致。

//有参数
window.webkit.messageHandlers.deviceInfo.postMessage({
        "body": "buttonActionMessage"
});

//无参数
window.webkit.messageHandlers.deviceInfo.postMessage("");

2、iOS 实现WKScriptMessageHandler协议

@interface ViewController ()
@property (nonatomic, strong) WKWebView * webView;

@end

3、iOS 初始化WKWebView

这里注意[userController addScriptMessageHandler:self name:@”deviceInfo”];
这个方法里的deviceInfo要与前端定义的一致。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    WKUserContentController *userController = [[WKUserContentController alloc] init];
    configuration.userContentController = userController;
    self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    [userController addScriptMessageHandler:self name:@"deviceInfo"];

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:kURL]];
    [self.webView loadRequest:request];
    [self.view addSubview:self.webView];
}

4、iOS 实现WKScriptMessageHandler协议方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

    if ([message.name isEqualToString:@"deviceInfo"]) {

        NSString *deviceInfoStr = message.body;
        NSLog(@"deviceInfo:%@", deviceInfoStr);

        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"JS调用的OC回调方法" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *action = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleCancel handler:nil];
        [alert addAction:action];
        [self presentViewController:alert animated:YES completion:nil];
    }

}

message.body就是前端传来的参数

OC调用JS方法

1、实现WKNavigationDelegate协议

@interface ViewController ()
@property (nonatomic, strong) WKWebView * webView;

@end

2、实现WKNavigationDelegate协议的- webView: didFinishNavigation:方法

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

}

3、OC调用JS方法

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    [webView evaluateJavaScript:@"deviceInfo('8.3')" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"ok");
    }];

}

其中deviceInfo(‘8.3’)为前端给出的JS方法名8.3是需要传给前端的参数

4、注意事项

以下错误的解决方法

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;

一定要在网页加载完成后调用，否则报错

JS方法一定要放在最外层