iOS下JS与OC互相调用（五）UIWebView+WebViewJavascriptBridge

WebViewJavascriptBridge是一个有点年代的JS与OC交互的库&＃xff0c;使用该库的著名应用还挺多的&＃xff0c;目前这个库有7000&＃43;star。我去翻看了它的第一版本已经是4年前了&＃xff0c;在版本V4.1.4以及之前&＃xff0c;该库只有一个类和一个js 的txt文件&＃xff0c;所以旧版本的WebViewJavascriptBridge 是非常容易理解的。而最新版的WebViewJavascriptBridge因为也要兼容WKWebView&＃xff0c;所以里面也加入了两个新的类&＃xff0c;一开始看的时候&＃xff0c;会被它里面负责的逻辑吓到&＃xff0c;其实仔细越多是非常简单的。

WebViewJavascriptBridge使用讲解

由于WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些许差别&＃xff0c;所以就分成两篇文章来讲解WebViewJavascriptBridge。
本文介绍的是在UIWebView中使用WebViewJavascriptBridge来达到JS与OC互相调用的目的。WKWebView使用的是WKWebViewJavascriptBridge。接下来&＃xff0c;我就从零开始边搭建工程边讲解WebViewJavascriptBridge。由于只研究了两天&＃xff0c;可能有讲解的不到位&＃xff0c;欢迎批评指正。
先上效果图&＃xff1a;

第一步、搭建工程&＃xff0c;将WebViewJavascriptBridge库添加到工程中。

新建工程的步骤就略过了&＃xff0c;WebViewJavascriptBridge的github地址是&＃xff1a;WebViewJavascriptBridge&＃xff0c;我使用的是版本V5.0.5。

第二步、创建UIWebView和WebViewJavascriptBridge示例。

2.1 创建UIWebView
创建UIWebView的代码(viewDidLoad中截选)&＃xff1a;

self.webView &＃61; [[UIWebView alloc] initWithFrame:self.view.frame];[self.view addSubview:self.webView];NSURL *htmlURL &＃61; [[NSBundle mainBundle] URLForResource:&＃64;"index.html" withExtension:nil];NSURLRequest *request &＃61; [NSURLRequest requestWithURL:htmlURL];// UIWebView 滚动的比较慢&＃xff0c;这里设置为正常速度self.webView.scrollView.decelerationRate &＃61; UIScrollViewDecelerationRateNormal;[self.webView loadRequest:request];

这里不要为UIWebView设置代理&＃xff0c;因为在创建WebViewJavascriptBridge的时候&＃xff0c;UIWebView的代理已经被赋值给了WebViewJavascriptBridge。

2.2 创建WebViewJavascriptBridge
因为WebViewJavascriptBridge实例&＃xff0c;在控制中多个地方用到&＃xff0c;因此最好定义一个property或者实例变量存起来。

_webViewBridge &＃61; [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}这个方法&＃xff0c;可以将UIWebView的代理&＃xff0c;从_webViewBridge中再传递出来。
// 所以如果你要在控制器中实现UIWebView的代理方法时&＃xff0c;添加下面这样代码&＃xff0c;否则可以不写。
[_webViewBridge setWebViewDelegate:self];

然后跟踪进{- bridgeForWebView }方法&＃xff0c;看它具体是怎么实现的。

&＃43; (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {WebViewJavascriptBridge* bridge &＃61; [[self alloc] init];[bridge _platformSpecificSetup:webView];return bridge;
}// 上面方法调用了这个方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {_webView &＃61; webView;_webView.delegate &＃61; self;
_base &＃61; [[WebViewJavascriptBridgeBase alloc] init];_base.delegate &＃61; self;
}

其他{-bridgeForWebView }内部也不过是初始化了一个WebViewJavascriptBridge对象&＃xff0c;并为其实例变量_webView 和 _base赋值而已。

第三步、注册js 要调用的Native 功能。

先上示例代码&＃xff0c;再分析功能&＃xff1a;

#pragma mark - private method
- (void)registerNativeFunctions
{[self registScanFunction];[self registShareFunction];[self registLocationFunction];[self regitstBGColorFunction];[self registPayFunction];[self registShakeFunction];
}- (void)registShareFunction
{// 所有JS 需要调用的原生功能都要先用registerHandler注册一下[_webViewBridge registerHandler:&＃64;"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {// data 的类型与 JS中传的参数有关NSDictionary *tempDic &＃61; data;// 在这里执行分享的操作NSString *title &＃61; [tempDic objectForKey:&＃64;"title"];NSString *content &＃61; [tempDic objectForKey:&＃64;"content"];NSString *url &＃61; [tempDic objectForKey:&＃64;"url"];// 将分享的结果返回到JS中NSString *result &＃61; [NSString stringWithFormat:&＃64;"分享成功:%&＃64;,%&＃64;,%&＃64;",title,content,url];responseCallback(result);}];
}

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 该方法有两个参数&＃xff1a;第一个参数handlerName&＃xff0c;是对这个功能起的一个别名&＃xff1b;第二个参数handler&＃xff0c;是个block&＃xff0c;也就是Native 实现的功能。JS要调用的Native 实现其实就是block 的 {} 内的代码功能。
为了便于维护&＃xff0c;我们可以将JS要调用的Native方法都集中到一起&＃xff0c;然后单个功能再封装一个方法。

第四步、完成HMTL必要的JS代码

由于WebViewJavascriptBridge也是拦截URL来实现的调用原生功能&＃xff0c;所以有一些代码跟之前iOS下JS与OC互相调用&＃xff08;一&＃xff09;中的HTML JS代码很相似。

HTML 中有一个必须要添加的JS 方法&＃xff0c;然后需要自动调用一次该方法。该方法是&＃xff1a;

function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }window.WVJBCallbacks &＃61; [callback];var WVJBIframe &＃61; document.createElement(&＃39;iframe&＃39;);WVJBIframe.style.display &＃61; &＃39;none&＃39;;WVJBIframe.src &＃61; &＃39;wvjbscheme://__BRIDGE_LOADED__&＃39;;document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

上面这个方法的参数是一个function&＃xff0c;这个方法的作用主要是在第一次加载HTML的时候起作用&＃xff0c;目的是加载一次wvjbscheme://__BRIDGE_LOADED__&＃xff0c;来触发往HTML中注入一些已经写好的JS方法。
看看上面的方法与下面这个是不是很相似&＃xff1a;

function loadURL(url) {var iFrame;iFrame &＃61; document.createElement("iframe");iFrame.setAttribute("src", url);iFrame.setAttribute("style", "display:none;");iFrame.setAttribute("height", "0px");iFrame.setAttribute("width", "0px");iFrame.setAttribute("frameborder", "0");document.body.appendChild(iFrame);// 发起请求后这个iFrame就没用了&＃xff0c;所以把它从dom上移除掉iFrame.parentNode.removeChild(iFrame);iFrame &＃61; null;
}

添加完setupWebViewJavascriptBridge方法&＃xff0c;需要在JS中主动调用一次该方法&＃xff1a;

setupWebViewJavascriptBridge(function(bridge) {bridge.registerHandler(&＃39;testJavascriptHandler&＃39;, function(data, responseCallback) {alert(&＃39;JS方法被调用:&＃39;&＃43;data);responseCallback(&＃39;js执行过了&＃39;);})
})

Native 需要调用的 JS 功能&＃xff0c;也是需要先注册&＃xff0c;然后再执行的。如果Native 需要调用的JS 功能有多个&＃xff0c;那么这些功能都要在这里先注册&＃xff0c;注册之后才能够被Native 调用。
接下来需要好好分析一下JS 中这个方法的作用了。

这里是重点&＃xff1a;
1、首先调用setupWebViewJavascriptBridge&＃xff0c;第一次执行的时候&＃xff0c;由于window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在&＃xff0c;所以会继续往下执行&＃xff0c;将参数callback&＃xff08;它是一个function&＃xff09;装进数组赋值给window.WVJBCallbacks。
js 支持动态添加属性 并赋值&＃xff0c;这里window.WVJBCallbacks &＃61; [callback];就是动态添加属性&＃xff0c;并赋值。 另外js中的全局变量都可以使用window.xxxx来调用;动态添加的属性也可以不加window.&＃xff0c;直接使用。
2、WebViewJavascriptBridge 帮助JS调用Native的url 有两种&＃xff0c;一种是wvjbscheme://__BRIDGE_LOADED__&＃xff1b;而另一种是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在调用setupWebViewJavascriptBridge的时候执行一次&＃xff0c;一般来说这个url 如果没有页面应该只会执行一次。第二种url所有js调用Native 功能时&＃xff0c;都会使用到。
3、在拦截到自定义的url 时&＃xff0c;WebViewJavascriptBridge分了三种情况&＃xff0c;如果是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已经写好的js&＃xff0c;这个js 在WebViewJavascriptBridge_JS中&＃xff1b;如果是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavascriptFromString&＃xff0c;取回调用js中callHandler传进去的参数。
然后再从WebViewJavascriptBridge之前保存的Native 方法对应的block&＃xff0c;调用对应的block。

第五步、调用Native 功能

利用之前注入的JS方法callHandler 就可以调用Native 功能了。
示例代码如下&＃xff1a;

function shareClick() {var params &＃61; {&＃39;title&＃39;:&＃39;测试分享的标题&＃39;,&＃39;content&＃39;:&＃39;测试分享的内容&＃39;,&＃39;url&＃39;:&＃39;http://www.baidu.com&＃39;};WebViewJavascriptBridge.callHandler(&＃39;shareClick&＃39;,params,function(response) {alert(response);document.getElementById("returnValue").value &＃61; response;});
}

这里callHandler前的WebViewJavascriptBridge,其实就是上一步注入到JS中的代码中&＃xff0c;动态创建属性&＃xff0c;动态赋值的属性。如下代码片段可以在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge &＃61; {
registerHandler: registerHandler,
callHandler: callHandler,
disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC};

而callHandler 内部调用了另一个js function _doSend,而_doSend内部其实&＃xff0c;就是把handlerName和 参数data&＃xff0c;再加上callbackId 装成键值对&＃xff0c;然后保存到数组sendMessageQueue&＃xff0c;同时加载一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。
到此 利用WebViewJavascriptBridge实现JS 调用iOS Native 就完成了。

第六步、Native 调用 js 功能

Native 调用js 的功能&＃xff0c;也需要先在js 中为要调用的功能注册一个别名。
6.1 js 注册Native 要调用的功能
示例代码&＃xff1a;

setupWebViewJavascriptBridge(function(bridge) {bridge.registerHandler(&＃39;testJSFunction&＃39;, function(data, responseCallback) {alert(&＃39;JS方法被调用:&＃39;&＃43;data);responseCallback(&＃39;js执行过了&＃39;);})// 注册其他的功能//bridge.regsiterHandler.....
})

6.2 Native 调用功能的别名handlerName

示例代码&＃xff1a;

// // 如果不需要参数&＃xff0c;不需要回调&＃xff0c;使用这个
// [_webViewBridge callHandler:&＃64;"testJSFunction"];
// // 如果需要参数&＃xff0c;不需要回调&＃xff0c;使用这个
// [_webViewBridge callHandler:&＃64;"testJSFunction" data:&＃64;"一个字符串"];// 如果既需要参数&＃xff0c;又需要回调&＃xff0c;使用这个[_webViewBridge callHandler:&＃64;"testJSFunction" data:&＃64;"一个字符串" responseCallback:^(id responseData) {NSLog(&＃64;"调用完JS后的回调&＃xff1a;%&＃64;",responseData);}];

而callHandler 方法又是如何实现调用js 方法的呢&＃xff1f;
callHandler 内部是将传递给js 的参数、handlerName、callbackId组合成字典&＃xff0c;然后把字典转换成字符串&＃xff0c;将转换后的字符串以参数的形式&＃xff0c;通过stringByEvaluatingJavascriptFromString传递给js &＃xff0c;js 中将传递过来的字符串转成json &＃xff0c;然后通过handlerName 获取对应的function执行。
关键的几个代码段&＃xff1a;

// 这里是Native 调用js &＃xff0c;把参数转换为字符串&＃xff0c;执行js 中的_handleMessageFromObjC方法。
- (void)_dispatchMessage:(WVJBMessage*)message {NSString *messageJSON &＃61; [self _serializeMessage:message pretty:NO];[self _log:&＃64;"SEND" json:messageJSON];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\\" withString:&＃64;"\\\\"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\"" withString:&＃64;"\\\""];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\&＃39;" withString:&＃64;"\\\&＃39;"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\n" withString:&＃64;"\\n"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\r" withString:&＃64;"\\r"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\f" withString:&＃64;"\\f"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\u2028" withString:&＃64;"\\u2028"];messageJSON &＃61; [messageJSON stringByReplacingOccurrencesOfString:&＃64;"\u2029" withString:&＃64;"\\u2029"];NSString* JavascriptCommand &＃61; [NSString stringWithFormat:&＃64;"WebViewJavascriptBridge._handleMessageFromObjC(&＃39;%&＃64;&＃39;);", messageJSON];if ([[NSThread currentThread] isMainThread]) {[self _evaluateJavascript:JavascriptCommand];} else {dispatch_sync(dispatch_get_main_queue(), ^{[self _evaluateJavascript:JavascriptCommand];});}
}

下面这里是找到handlerName 对应的function&＃xff0c;并执行function。

var handler &＃61; messageHandlers[message.handlerName];if (!handler) {console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);} else {handler(message.data, responseCallback);}

到这里 利用WebViewJavascriptBridge 实现Native 调用js 的功能就完成了。

提醒&＃xff1a;
JS 有动态参数的特性&＃xff0c;调用js 的方法&＃xff0c;可以传0个参数&＃xff0c;1个参数&＃xff0c;N个参数都可以。
例如&＃xff0c;我们在js中定义一个test()方法&＃xff0c;我们可以调用test()&＃xff0c;来执行这个方法&＃xff1b;如果有参数要传进来&＃xff0c;也可以调用test(xxx)&＃xff1b;如果有多个参数&＃xff0c;那么就用test(xxx,xxx)。当然如果我们定义的参数是test(a,b,c)&＃xff0c;也可以少传参数&＃xff0c;或者不传参数调用test()。

总结

利用WebViewJavascriptBridge来实现JS与OC的交互的优点&＃xff1a;
1、获取参数时&＃xff0c;更方便一些&＃xff0c;如果参数中有一些特殊符号或者url带参数&＃xff0c;能够很好的解析。
也有一些缺点&＃xff1a;
1、做一次交互&＃xff0c;需要执行的js 与原生的交互步骤较多&＃xff0c;至少有两次。
2、需要花较多的时间&＃xff0c;理解WebViewJavascriptBridge的原理和使用步骤。