WKWebview与js交互

应用场景：

项目中在原有h5界面中嵌入js代码，在指定位置加入第三方分享

此部分为js点击分享绑定部分代码，这里的事件名需要h5和前端协商好一致。

window.webkit.messageHandlers.<事件名>.postMessage(需要传递的数据)

 

iOS端

首先需要遵循WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler三个代理方法

 

WKWebViewConfiguration *wkConfig = [[WKWebViewConfiguration alloc] init];

    wkConfig.userContentController = [[WKUserContentController alloc] init];

此处事件名与h5端js代码事件名一致

    [wkConfig.userContentController addScriptMessageHandler:self name:@"事件名"];

 

    self.webview = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:wkConfig];

    self.webview.backgroundColor = WXColor(240, 240, 240);

    self.webview.UIDelegate = self;

    self.webview.navigationDelegate =self;

    [self.view addSubview:self.webview];

    [self.webview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL"]]];

 

// 页面开始加载时调用

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

}

// 当内容开始返回时调用

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

}

// 页面加载完成之后调用

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

//此处向原h5界面注入js代码jsStr。

    [self.webview evaluateJavaScript:jsStr completionHandler:^(id _Nullable rest, NSError * _Nullable error) {

        NSLog(@"error_____%@",error);

//如果这里提示error，则js代码中含有特殊字符如空格和换行，需要去掉。

    }];

// 页面加载失败时调用

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

}

    

}

//实现js注入方法的协议方法

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

    NSLog(@"message____%@", message);

    //找到对应js端的方法名,获取messge.body

    if ([message.name isEqualToString:@"方法名"]) {

  处理各类分享的点击事件

    }

}