写在前面
本文将介绍如何使用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方法一定要放在最外层
图片出处不详，请作者看到与我联系，侵删
.jpg)
