級別：★★☆☆☆
標(biāo)簽：「iOS與JS交互」「WKWebView與JS交互」「WKJSMessageHandler」
作者： Xs·H
審校： QiShare團隊
先解釋下標(biāo)題：“iOS與JS交互”径密。iOS指iOS原生代碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），交互指JS調(diào)用iOS和iOS調(diào)用JS。
作者將iOS與JS交互總結(jié)成了6種方式，并將逐一介紹邓嘹。目錄如下：
- iOS與JS交互之UIWebView-協(xié)議攔截
- iOS與JS交互之UIWebView-JavaScriptCore框架
- iOS與JS交互之UIWebView-JSExport協(xié)議
- iOS與JS交互之WKWebView-協(xié)議攔截
- iOS與JS交互之WKWebView-WKScriptMessageHandler協(xié)議
- iOS與JS交互之WKWebView-WKUIDelegate協(xié)議
本文介紹如果使用
WKWebView的WKScriptMessageHandler實現(xiàn)iOS與JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的負責(zé)網(wǎng)頁的渲染與展示的類，相比UIWebView速度更快捶码，占用內(nèi)存更少，支持更多的HTML特性或链。WKScriptMessageHandler是WebKit提供的一種在WKWebView上進行JS消息控制的協(xié)議惫恼。
一、JS調(diào)用iOS：
實現(xiàn)邏輯：點擊JS的登錄按鈕澳盐，JS將登錄成功后的token數(shù)據(jù)傳遞給iOS祈纯，iOS將收到的數(shù)據(jù)展示出來。
-
實現(xiàn)效果：
JS調(diào)用iOS實現(xiàn)效果 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代碼：
//! 導(dǎo)入WebKit框架頭文件
#import <WebKit/WebKit.h>
//! WKWebViewWKScriptMessageHandlerController遵守WKScriptMessageHandler協(xié)議
@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時回調(diào)此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
[WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];
}
}
- 實現(xiàn)原理：
1腕窥、JS與iOS約定好jsToOc方法，用作JS在調(diào)用iOS時的方法筛婉；
2簇爆、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法監(jiān)聽name為jsToOc的消息；
3爽撒、JS通過window.webkit.messageHandlers.jsToOc.postMessage()的方式對jsToOc方法發(fā)送消息入蛆；
4、iOS在-userContentController:didReceiveScriptMessage:方法中讀取name為jsToOc的消息數(shù)據(jù)message.body硕勿。
PS：
[userContentController addScriptMessageHandler:self name:@"jsToOc"]會引起循環(huán)引用問題哨毁。一般來說，在合適的時機removeScriptMessageHandler可以解決此問題源武。比如：在-viewWillAppear:方法中執(zhí)行add操作扼褪，在-viewWillDisappear:方法中執(zhí)行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"];
}
二粱栖、iOS調(diào)用JS：
iOS調(diào)用JS方式與上篇文章一致迎捺，都是通過WKWebView的
-evaluateJavaScript:completionHandler:方法來實現(xiàn)的。
- 可從QiShare的Github獲取工程源碼
了解更多iOS及相關(guān)新技術(shù)查排，請關(guān)注我們的公眾號：
關(guān)注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)
推薦文章：
不一樣的React context
