WebViewJavascriptBridge 是一個封裝處理好的第三方庫.功能非常強大.下面就簡單介紹一下如何使用這個WebViewJavascriptBridge庫,以供大家交流探討和學習.
在學習前 先去github 下載這個庫 ,下載: https://github.com/marcuswestin/WebViewJavascriptBridge
我們先看看這個庫是如何處理的.
WebViewJavascriptBridge如其名字定義，就相當于一座橋梁，兩端連接了Obj-C和JavaScript。它提供了OC和JS互調的方法接口，方法在互調之前，我們需要向對方注冊我們的方法列表.
1. OC調用和回調JS
//1.1 JS注冊OC的方法并實現回調OC
bridge.registerHandler('JS EchoDemo',function(data, responseCallback) {
console.log("-----JS demo called with:", data)
responseCallback(data)
})
//1.2 OC調用JS方法并實現回調函數
[self.bridge callHandler:@"JS EchoDemo"responseCallback:^(id responseData) {
NSLog(@"ObjC received response+++: %@", responseData);
}];
2. JS調用和回調OC
//2.1 OC注冊JS的方法并實現回調JS
[self.bridge registerHandler:@"ObjC EchoDemo"handler:^(iddata, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with+++: %@", data);
responseCallback(data);
}];
//注意方法名稱一致
//2.2 JS調用OC方法并實現回調函數
bridge.callHandler('ObjC EchoDemo', {'key':'value'},functionresponseCallback(responseData) {
console.log("------JS received response:", responseData)
})
先看下庫的文件，一共有8個文件，而我們關心的文件只有3個，因為文件5，6是兼容WKWebView，實現原理都是一樣的.
1. WebViewJavascriptBridge.h
2. WebViewJavascriptBridge.m
3. WebViewJavascriptBridgeBase.h
4. WebViewJavascriptBridgeBase.m
5. WKWebViewJavascriptBridge.h
6. WKWebViewJavascriptBridge.m
7. WebViewJavascriptBridge_JS.h
8. WebViewJavascriptBridge_JS.m
我們需要重點關注文件2，4，8中的代碼，值得一提的是文件7，8是 注入JS 相關的文件
實現部分
1. 首先我們有一個bridge對象
@property(nonatomic, strong) WebViewJavascriptBridge *bridge;
2.初始化對象
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
bridge在初始化的時候會觸發bridgeBase的初始化(第4個文件)，實際上消息的處理和回調都是在bridgeBase中完成的，bridge的作用是：進行webView代理的傳遞，調用bridgeBase中消息的注冊，調用和回調處理.
我們來看下bridgeBase的頭文件中的屬性，有消息隊列數組，消息處理字典，響應回調字典和具體的消息處理對象
@property(assign)id delegate;
@property(strong,nonatomic)NSMutableArray* startupMessageQueue;
@property(strong,nonatomic)NSMutableDictionary* responseCallbacks;
@property(strong,nonatomic)NSMutableDictionary* messageHandlers;
@property(strong,nonatomic) WVJBHandler messageHandler;
3 .當webView第一次加載的時候，我們看下面的代碼，首先判斷是否是當前scheme，之后判斷URL是否是第一次加載的URL，與消息隊列有關的URL定義與第一次加載的URL定義和處理方式是不同的，所以這里要進行區分，第一次加載的時候我們會注入(第8個文件)中的相關JS代碼。消息隊列相關的URL我們需要對消息進行處理
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
if(webView != _webView) {returnYES; }
NSURL*url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if([_base isCorrectProcotocolScheme:url]) {
if([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
}elseif([_base isQueueMessageURL:url]) {
NSString*messageQueueString = [self_evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];
}else{
[_base logUnkownMessage:url];
}
returnNO;
}elseif(strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return[strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
}else{
returnYES;
}
}
4 .第一次加載的時候我們會注入JS代碼，執行"_evaluateJavascript:"方法，實際調用的是webView中的"stringByEvaluatingJavaScriptFromString:"方法來注入JS代碼，注入之后如果此時隊列消息有消息的話就會進行消息的調用
- (void)injectJavascriptFile
{
NSString*js = WebViewJavascriptBridge_js();
[self _evaluateJavascript:js];
if(self.startupMessageQueue) {
NSArray* queue =self.startupMessageQueue;
self.startupMessageQueue =nil;
for(idqueuedMessage in queue) {
[self_dispatchMessage:queuedMessage];
}
}
}
5 接下來我們看下JS端的部分代碼，注入的這部分JS代碼首先為html的window增加了一個bridge對象，這個對象里面有具體的有消息隊列數組，消息處理字典，響應回調字典和具體的消息處理對象，和OC端的bridge是保持一致的，到這里完成了JS部分的初始化，整個初始化也就完成了
if(window.WebViewJavascriptBridge) {
return;
}
window.WebViewJavascriptBridge = {
registerHandler: registerHandler,
callHandler: callHandler,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
};
varmessagingIframe;
varsendMessageQueue = [];
varmessageHandlers = {};
6.前文提到了OC調用JS方法，首先需要在JS端進行方法的注冊，我們來看方法的注冊代碼，函數定義部分是不變的，只要使用這個庫，那么這一部分代碼就是必須有的，調用函數傳入回調部分的代碼就是我們自己需要自定義的地方，這里的registerHandler中的函數名就是OC要調用JS的方法名
//此部分屬于公用 ?js代碼
function setupWebViewJavascriptBridge(callback) {
if(window.WebViewJavascriptBridge) {returncallback(WebViewJavascriptBridge); }
if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
varWVJBIframe = document.createElement('iframe');
WVJBIframe.style.display ='none';
WVJBIframe.src ='wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
//1 注冊JS的方法給OC
bridge.registerHandler('JS Echo',function(data, responseCallback) {
console.log("JS Echo called with:", data)responseCallback(data)
})
})
OC調用的時候callHandler的時候
(void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
NSMutableDictionary* message = [NSMutableDictionarydictionary];
if(data) {
message[@"data"] = data;
}
if(responseCallback) {
NSString* callbackId = [NSStringstringWithFormat:@"objc_cb_%ld", ++_uniqueId];
self.responseCallbacks[callbackId] = [responseCallbackcopy];
message[@"callbackId"] = callbackId;
}
if(handlerName) {
message[@"handlerName"] = handlerName;
}
//消息派遣
[self_queueMessage:message];
}
8. 拿到對應的消息之后，首先要格式化成字符串對象，因為webView執行JavaScript腳本的時候接受的是一個字符串對象，之后進行一些列的轉換處理，在下面的代碼我們注意到有這樣的字符串"WebViewJavascriptBridge._handleMessageFromObjC"，這個就是我們之前注入的JS腳本里面對OC方法的處理的函數，于是我們成功的把OC的消息傳遞給了JS
- (void)_dispatchMessage:(WVJBMessage*)message {
NSString*messageJSON = [self_serializeMessage:message pretty:NO];
[self_log:@"SEND"json:messageJSON];
//格式化json
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];
if([[NSThreadcurrentThread] isMainThread]) {
[self _evaluateJavascript:javascriptCommand];
}else{
dispatch_sync(dispatch_get_main_queue(), ^{
[self _evaluateJavascript:javascriptCommand];
});
}
}
JS拿到這個消息之后，進行消息的派遣，首先要反序列化字符串得到，方法名和參數，及方法的標識符，需要一提的是，這里先要檢查JS端緩存的的回調方法，通過標識符，我們可以找到對應的回調函數，如果有則調用方法，沒有則直接調用方法，下面的代碼就是這樣的過程，至此OC調用JS完成
function_dispatchMessageFromObjC(messageJSON) {
setTimeout(function_timeoutDispatchMessageFromObjC() {
varmessage = JSON.parse(messageJSON);
varmessageHandler;
varresponseCallback;
if(message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if(!responseCallback) {
return;
}
responseCallback(message.responseData);
deleteresponseCallbacks[message.responseId];
}else{
if(message.callbackId) {
varcallbackResponseId = message.callbackId;
responseCallback =function(responseData) {
_doSend({ responseId:callbackResponseId, responseData:responseData });
};
}
varhandler = messageHandlers[message.handlerName];
try{
handler(message.data, responseCallback);
}catch(exception) {
console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
}
if(!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
}
}
});
}
內容涉及到的比較多 本人 水平有限理解的也不是很詳細,就先介紹這么多吧
