WKWebView之JS与OC交互

前言

基于UIWebView的JS与OC交互（一）之JSExport
基于UIWebView的JS与OC交互（二）之拦截URL
基于UIWebView的JS与OC交互（三）之Block
基于WKWebView的JS与OC交互
WKWebView是苹果公司在iOS8系统推出的。在性能、稳定性、占用内存方面相对于UIWebView有很大提升。目前的新项目中很大一部分开发者都会选择WKWebView作为web加载控件来使用。在使用WKWebview过程中，难免会遇到js交互问题，本篇文章主要阐述的是WKWebview调用js方法，以及js调用WKWebview原生方法。
Demo在这里

正文

第一步，OC调用JS

//oc调用js方法
- (void)js_Method
{
    //通过调用js里的方法来改变网页测试文本的背景色
    NSString *js_str = [NSString stringWithFormat:@"changeBgColor()"]; //准备执行的js代码:改变测试文本背景色
    [self.webpageView evaluateJavaScript:js_str completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        NSLog(@"%@", error);
    }];
}

image.png

第二步，JS调用OC方法

注意：WKWebView与UIWebView属于不同的web加载控件，h5在调用oc本地方法时方式也会不同。
首先，注册本地方法。

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    //重要：注册本地方法
    [self.webpageView.configuration.userContentController addScriptMessageHandler:self name:@"showAlert"];
}

其次，在代理方法中接收本地方法及其参数。

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    //重要：在这里截取H5调用的本地方法
    if ([message.name isEqualToString:@"showAlert"])
    {
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"本地弹窗-提示" message:[NSString stringWithFormat:@"%@", message.body] delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
        [alert show];
    }
}

注意：message.name 是方法名称；message.body为参数，是一个id类型。

填坑：此时，操作并未完成，在退出页面时还要销毁注册方法，否则会引起内存泄漏问题。

-(void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    //重要：销毁已经注册的本地方法，否则会引起内存泄漏
    [self.webpageView.configuration.userContentController removeScriptMessageHandlerForName:@"showAlert"];
}

H5代码（调用方法）：

    //showAlert 方法名
    //postMessage 系统固定传参方法
    //括号里为参数列表：id类型
   //如果参数为空传null即可
    window.webkit.messageHandlers.showAlert.postMessage("WKWebView-oc弹窗");

image.png

iOS技术交流群：681732945