iOS与JS交互之WKWebView-WKScriptMessageHandler协议

级别：★★☆☆☆
标签：「iOS与JS交互」「WKWebView与JS交互」「WKJSMessageHandler」
做者： Xs·H
审校： QiShare团队

先解释下标题：“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前端（不单指JavaScript），交互指JS调用iOS和iOS调用JS。 做者将iOS与JS交互总结成了6种方式，并将逐一介绍。目录以下：

• iOS与JS交互之UIWebView-协议拦截
• iOS与JS交互之UIWebView-JavaScriptCore框架
• iOS与JS交互之UIWebView-JSExport协议
• iOS与JS交互之WKWebView-协议拦截
• iOS与JS交互之WKWebView-WKScriptMessageHandler协议
• iOS与JS交互之WKWebView-WKUIDelegate协议

---

本文介绍若是使用WKWebView的WKScriptMessageHandler实现iOS与JS交互。 WKWebView是Apple在iOS8推出的Webkit框架中的负责网页的渲染与展现的类，相比UIWebView速度更快，占用内存更少，支持更多的HTML特性。WKScriptMessageHandler是WebKit提供的一种在WKWebView上进行JS消息控制的协议。

1、JS调用iOS：

• 实现逻辑：点击JS的登陆按钮，JS将登陆成功后的token数据传递给iOS，iOS将收到的数据展现出来。

• 实现效果：

  

• JS代码：

//! 登陆按钮
<button onclick = "login()" style = "font-size: 18px;">登陆</button>
复制代码

//! 登陆
function login() {
  var token = "js_tokenString";
  loginSucceed(token);
}

//! 登陆成功
function loginSucceed(token) {
  var action = "loginSucceed";
  window.webkit.messageHandlers.jsToOc.postMessage(action, token);
}
复制代码

• iOS代码：

//! 导入WebKit框架头文件
#import <WebKit/WebKit.h>

//! WKWebViewWKScriptMessageHandlerController遵照WKScriptMessageHandler协议
@interface WKWebViewWKScriptMessageHandlerController () <WKScriptMessageHandler>
复制代码

//! 为userContentController添加ScriptMessageHandler，并指明name
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"jsToOc"];

//! 使用添加了ScriptMessageHandler的userContentController配置configuration
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = userContentController;

//! 使用configuration对象初始化webView
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
复制代码

#pragma mark - WKScriptMessageHandler

//! WKWebView收到ScriptMessage时回调此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    if ([message.name caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];
    }
}
复制代码

• 实现原理：
  一、JS与iOS约定好jsToOc方法，用做JS在调用iOS时的方法；
  二、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法监听name为jsToOc的消息；
  三、JS经过window.webkit.messageHandlers.jsToOc.postMessage()的方式对jsToOc方法发送消息；
  四、iOS在-userContentController:didReceiveScriptMessage:方法中读取name为jsToOc的消息数据message.body。

PS：[userContentController addScriptMessageHandler:self name:@"jsToOc"]会引发循环引用问题。通常来讲，在合适的时机removeScriptMessageHandler能够解决此问题。好比：在-viewWillAppear:方法中执行add操做，在-viewWillDisappear:方法中执行remove操做。以下：

- (void)viewWillAppear:(BOOL)animated {
    
    [super viewWillAppear:animated];
    
    [_webView.configuration.userContentController addScriptMessageHandler:self name:@"jsToOc"];
}

- (void)viewWillDisappear:(BOOL)animated {
    
    [super viewWillDisappear:animated];
    
    [_webView.configuration.userContentController removeScriptMessageHandlerForName:@"jsToOc"];
}
复制代码

---

2、iOS调用JS：

iOS调用JS方式与上篇文章一致，都是经过WKWebView的-evaluateJavaScript:completionHandler:方法来实现的。

---

• 可从QiShare的Github获取工程源码

续篇：iOS与JS交互之WKWebView-WKUIDelegate协议

---

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章： 不同的React context