JS调用OC过程
以WKWebView为例
1、OC端注册
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];
// 实际调用
- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
//将回调blcok存储在一个全局字典中
_base.messageHandlers[handlerName] = [handler copy];
}
2、JS端调用OC端注册的名称，并传参数设置回调函数。
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
//实际调用
function callHandler(handlerName, data, responseCallback) {
//没有参数传入 第二个参数为函数类型 的情况处理
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
// 最终调用 将调用的 handlerName 和参数 包装成字典
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
3、改变iframe.src 属性，触发OC端代理方法
function _doSend(message, responseCallback) {
//有回调 则生成唯一callbackId，并存在全局sendMessageQueue.push数组中。
if (responseCallback) {
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
//在注册的方法真正执行时才将回调函数存储在全局 responseCallbacks 中
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
// 在传入的字典中加入 callbackId ，此时 message 应为
//{ handlerName:handlerName, data:data，callbackId：callbackId }
}
sendMessageQueue.push(message);
// 将此字典存入全局 数组 sendMessageQueue
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
4、触发代理
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
if (webView != _webView) { return; }
NSURL *url = navigationAction.request.URL;
__strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
if ([_base isWebViewJavascriptBridgeURL:url]) {
if ([_base isBridgeLoadedURL:url]) {// 初始化 注入js
[_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {// 已经完成js注入 进入消息发送
[self WKFlushMessageQueue];
} else {
[_base logUnkownMessage:url];
}
decisionHandler(WKNavigationActionPolicyCancel);
return;
}
if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:decisionHandler:)]) {
[_webViewDelegate webView:webView decidePolicyForNavigationAction:navigationAction decisionHandler:decisionHandler];
} else {
decisionHandler(WKNavigationActionPolicyAllow);
}
}
4、获取到callbackId
// 取出 js全局 sendMessageQueue 存的全部数据
- (NSString *)webViewJavascriptFetchQueyCommand {
return @"WebViewJavascriptBridge._fetchQueue();";
}
//实际执行
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
// 返回 callbackId
return messageQueueString;
}
- (void)WKFlushMessageQueue {
[_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
if (error != nil) {
NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
}
//拿到 callbackId 进入 调用OC方法
[_base flushMessageQueue:result];
}];
}
5、核型方法 调用OC方法并回调
-(void)flushMessageQueue:(NSString *)messageQueueString{
if (messageQueueString == nil || messageQueueString.length == 0) {
NSLog(@"WebViewJavascriptBridge: WARNING: ObjC got nil while fetching the message queue JSON from webview. This can happen if the WebViewJavascriptBridge JS is not currently present in the webview, e.g if the webview just loaded a new page.");
return;
}
id messages = [self _deserializeMessageJSON:messageQueueString];
for (WVJBMessage* message in messages) {
if (![message isKindOfClass:[WVJBMessage class]]) {
NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
continue;
}
[self _log:@"RCVD" json:message];
/*
JS 调用OC 不走此流程
NSString* responseId = message[@"responseId"];
if (responseId) {
WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
responseCallback(message[@"responseData"]);
[self.responseCallbacks removeObjectForKey:responseId];
} else*/ {
WVJBResponseCallback responseCallback = NULL;
NSString* callbackId = message[@"callbackId"];
// 有回调 callbackId 则生成一个
//typedef void (^WVJBResponseCallback)(id responseData); 同类型的block
if (callbackId) {
responseCallback = ^(id responseData) {
if (responseData == nil) {
responseData = [NSNull null];
}
// 关键代码 再次回传 callbackId 并传入回调参数
WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
[self _queueMessage:msg];
};
} else {
responseCallback = ^(id ignoreResponseData) {
// Do nothing
};
}
// 根据OC端注册名 在全局字典 self.messageHandlers 中取出保存的block
WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
if (!handler) {
NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
continue;
}
// 执行
handler(message[@"data"], responseCallback);
// 因为 responseCallback 也是一个block 其中会执行 [self _queueMessage:msg];
}
}
}
6、核型方法 调用OC方法并回调
- (void)_dispatchMessage:(WVJBMessage*)message {
NSString *messageJSON = [self _serializeMessage:message pretty:NO];
[self _log:@"SEND" json:messageJSON];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
//在主线程中直接执行js 传入的参数 为 @{ @"responseId":callbackId, @"responseData":responseData };
if ([[NSThread currentThread] isMainThread]) {
[self _evaluateJavascript:javascriptCommand];
} else {
dispatch_sync(dispatch_get_main_queue(), ^{
[self _evaluateJavascript:javascriptCommand];
});
}
}
7、调用回调
function _doDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
// 拿出步骤二存的回调函数 执行
responseCallback(message.responseData);
// 执行完毕 删除回调函数
delete responseCallbacks[message.responseId];
}
// 下面的不走 JS调用OC并回调的过程到此结束
/* else {
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
}
}
*/
}
