window.WebViewJavascriptBridge ={
init: init,
send: send,
registerHandler:registerHandler,
callHandler: callHandler,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC:_handleMessageFromObjC
}
方法的实现：
function init(messageHandler) {
if (WebViewJavascriptBridge._messageHandler) { throw newError('WebViewJavascriptBridge.init called twice') }
WebViewJavascriptBridge._messageHandler = messageHandler
var receivedMessages = receiveMessageQueue
receiveMessageQueue = null
//如果接收队列有消息，则处理
for (var i=0; i
_dispatchMessageFromObjC(receivedMessages[i])
}
}
function send(data, responseCallback) {
_doSend({ data:data }, responseCallback)
}
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler
}
function callHandler(handlerName, data, responseCallback) {
_doSend({ data:data, handlerName:handlerName },responseCallback)
}
涉及到的两个内部方法：
function _doSend(message, responseCallback) {
//如果定义了回调
if (responseCallback) {
//为回调对象产生唯一标识
var callbackId = 'js_cb_'+(uniqueId++)
//并存储到一个集合对象里
responseCallbacks[callbackId] = responseCallback
//新增一个key-value对- 'callbackId':callbackId
message['callbackId'] = callbackId
}
sendMessageQueue.push(JSON.stringify(message))
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' +QUEUE_HAS_MESSAGE
}
function _dispatchMessageFromObjC(messageJSON) {
setTimeout(function _timeoutDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON)
var messageHandler
if (message.responseId) {
//取出回调函数对象并执行
var responseCallback = responseCallbacks[message.responseId]
responseCallback(message.error, message.responseData)
delete responseCallbacks[message.responseId]
} else {
var response
if (message.callbackId) {
var callbackResponseId = message.callbackId
response = {
respondWith: function(responseData) {
_doSend({ responseId:callbackResponseId, responseData:responseData})
},
respondWithError: function(error) {
_doSend({ responseId:callbackResponseId, error:error })
}
}
}
var handler = WebViewJavascriptBridge._messageHandler
//如果消息中已包含消息处理器，则使用该处理器；否则使用默认处理器
if (message.handlerName) {
handler = messageHandlers[message.handlerName]
}
try {
handler(message.data, response)
} catch(exception) {
console.log("WebViewJavascriptBridge: WARNING: javascript handlerthrew.", message, exception)
}
}
})
}
还有两个js方法是供native端直接调用的方法(它们本身也是为native端服务的)：
function _fetchQueue(){
var messageQueueString =sendMessageQueue.join(MESSAGE_SEPARATOR)
sendMessageQueue = []
returnmessageQueueString
}
function_handleMessageFromObjC(messageJSON) {
//如果接收队列对象存在则入队该消息，否则直接处理
if (receiveMessageQueue){
receiveMessageQueue.push(messageJSON)
} else {
_dispatchMessageFromObjC(messageJSON)
}
}
最后还有一段代码就是，定义一个事件并触发，同时设置设置上面定义的WebViewJavascriptBridge对象为事件的一个属性：
var doc = document
_createQueueReadyIframe(doc)
//创建并实例化一个事件对象
var readyEvent =doc.createEvent('Events')
readyEvent.initEvent('WebViewJavascriptBridgeReady')
readyEvent.bridge =WebViewJavascriptBridge
//触发事件
doc.dispatchEvent(readyEvent)
Native端实现
其实大致跟上面的类似，只是因为语法不同(所以我上面才说两端是对等的)：WebViewJavascriptBridge.h/.m
它其实可以看作UIWebView的Controller，实现了UIWebViewDelegate协议：
@interface WebViewJavascriptBridge :NSObject
+(id)bridgeForWebView:(UIWebView*)webViewhandler:(WVJBHandler)handler;
+(id)bridgeForWebView:(UIWebView*)webView webViewDelegate:(id)webViewDelegate handler:(WVJBHandler)handler;
+(void)enableLogging;
-(void)send:(id)message;
- (void)send:(id)messageresponseCallback:(WVJBResponseCallback)responseCallback;
-(void)registerHandler:(NSString*)handlerNamehandler:(WVJBHandler)handler;
-(void)callHandler:(NSString*)handlerName;
-(void)callHandler:(NSString*)handlerName data:(id)data;
-(void)callHandler:(NSString*)handlerName data:(id)dataresponseCallback:(WVJBResponseCallback)responseCallback;
@end
方法的实现其实是跟前面类似的，这里我们只看一下UIWebView的一个协议方法：shouldStartLoadWithRequest：
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
if ([[url scheme]isEqualToString:CUSTOM_PROTOCOL_SCHEME]) {
//队列中有数据
if ([[urlhost] isEqualToString:QUEUE_HAS_MESSAGE]) {
//刷出队列中数据
[self_flushMessageQueue];
} else{
NSLog(@"WebViewJavascriptBridge: WARNING: Received unknownWebViewJavascriptBridge command %@://%@", CUSTOM_PROTOCOL_SCHEME,[url path]);
}
returnNO;
} else if (self.webViewDelegate) {
return[self.webViewDelegate webView:webViewshouldStartLoadWithRequest:requestnavigationType:navigationType];
} else {
returnYES;
}
}
使用示例
UI端
//给WebViewJavascriptBridgeReady事件注册一个Listener
document.addEventListener('WebViewJavascriptBridgeReady',onBridgeReady, false)
//事件的响应处理
functiononBridgeReady(event) {
var bridge =event.bridge
var uniqueId = 1
//日志记录
function log(message, data){
var log =document.getElementByIdx_x('log')
var el =document.createElement_x('div')
el.className ='logLine'
el.innerHTML = uniqueId++ +'. ' + message + (data ? ': ' + JSON.stringify(data) : '')
if (log.children.length) {log.insertBefore(el, log.children[0]) }
else { log.appendChild(el)}
}
//初始化操作，并定义默认的消息处理逻辑
bridge.init(function(message) {
log('JS got a message',message)
})
//注册一个名为testJavascriptHandler的处理器，并定义用于响应的处理逻辑
bridge.registerHandler('testJavascriptHandler', function(data,response) {
log('JS handlertestJavascriptHandler was called', data)
response.respondWith({'Javascript Says':'Right back atcha!' })
})
//创建一个发送消息给native端的按钮
var button =document.getElementByIdx_x('buttons').appendChild(document.createElement_x('button'))
button.innerHTML = 'Sendmessage to ObjC'
button.ontouchstart =function(e) {
e.preventDefault()
//发送消息
bridge.send('Hello from JSbutton')
}
document.body.appendChild(document.createElement_x('br'))
//创建一个用于调用native端处理器的按钮
var callbackButton =document.getElementByIdx_x('buttons').appendChild(document.createElement_x('button'))
callbackButton.innerHTML ='Fire testObjcCallback'
callbackButton.ontouchstart= function(e) {
e.preventDefault()
log("Calling handlertestObjcCallback")
//调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑
bridge.callHandler('testObjcCallback', {'foo': 'bar'},function(response) {
log('Got response fromtestObjcCallback', response)
})
}
}
//实例化一个webview并加入到window中去
UIWebView* webView = [[UIWebView alloc]initWithFrame:self.window.bounds];
[self.window addSubview:webView];
//启用日志记录
[WebViewJavascriptBridge enableLogging];
//实例化WebViewJavascriptBridge并定义native端的默认消息处理器
_bridge = [WebViewJavascriptBridgebridgeForWebView:webView handler:^(id data, WVJBResponse *response){
NSLog(@"ObjC received message from JS: %@", data);
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"ObjC gotmessage from Javascript:" message:data delegate:nilcancelButtonTitle:@"OK" otherButtonTitles:nil];
[alertshow];
}];
//注册一个供UI端调用的名为testObjcCallback的处理器，并定义用于响应的处理逻辑
[_bridge registerHandler:@"testObjcCallback"handler:^(id data, WVJBResponse *response) {
NSLog(@"testObjcCallback called: %@", data);
[responserespondWith:@"Response from testObjcCallback"];
}];
//发送一条消息给UI端并定义回调处理逻辑
[_bridge send:@"A string sent from ObjC beforeWebview has loaded." responseCallback:^(id error, id responseData){
if (error){ NSLog(@"Uh oh - I got an error: %@", error); }
NSLog(@"objc got response! %@ %@", error, responseData);
}];
//调用一个在UI端定义的名为testJavascriptHandler的处理器，没有定义回调
[_bridge callHandler:@"testJavascriptHandler"data:[NSDictionary dictionaryWithObject:@"before ready"forKey:@"foo"]];
[self renderButtons:webView];
[self loadExamplePage:webView];
//单纯发送一条消息给UI端
[_bridge send:@"A string sent from ObjC afterWebview has loaded."];
来源：http://blog.csdn.net/yanghua_kobe/article/details/8209751
