Home » IOS » IOS development, advanced tour, -WebViewJavascript...

IOS development, advanced tour, -WebViewJavascriptBridge usage

because the company is a business platform, some of the activities of the page, mall home to relatively high requirements for flexibility, the flexible page, using H5 to develop is again appropriate nevertheless. Due to demand driven, WebViewJavascriptBridge was found in git, H5 and native to achieve some of the data on the interaction. After a period of use, have a certain understanding of this summary on the.

At first glance WebViewJavascriptBridge

sample, was inside the callback to get a little uncomfortable, but if you jump out from the relatively high level of use of the three party libraries, temporarily ignoring some of all the minor details will be much clearer idea of.

The principle of interaction between

WebViewJavascriptBridge is actually the relation between registration and call.

webView passes data to OC:


OC registers the handler, and the webView call passes the data in through the arguments, and the OC handles the data.

by callback
The same is true for

OC to pass data to webView:

webView registers handler, OC passes data through parameters, and webView handles data.

by callback

for the specific use of WebViewJavascriptBridge (OC side)

a webView, a bridge

javaScriptBridge is a bridge to pass data between webView and native. His presence is dependent on a webView instance object, and in general, a webView corresponds to a javaScriptBridge

WebViewJavascriptBridge* bridge;

* webView;

Initialization of bridge


_bridge = [WebViewJavascriptBridge
bridgeForWebView: _webView
webViewDelegate: self
handler: ^ (id
, data),
WVJBResponseCallback, responseCallback) {


register handler

handler: ^ (id
, data),
WVJBResponseCallback, responseCallback) {

NSLog@ > > testObjcCallback called:% @", data);

responseCallback (@, Response, from, testObjcCallback, );


Call the webView registered by handler

callHandler: @, "testJavascriptHandler",
data: @{
@ "foo", : "@", "before ready",

Call about handler,

We see there are two types of handler in WebViewJavascriptBridge, and the timing of these two types of handler is slightly different,.

Calls from WebViewJavascriptBridge are based on the send and callhandler methods, and the two methods correspond to the two handler.


js side calls bridge.send (), corresponding to the handler

in the initialization of the OC

js side calls bridge.callhandler, corresponding to the handler

registered in OC

about the parameter handler in

data:js data passed to OC, responseCallback, OC end to get the data, and deal with the success of the JS after the callback.

Use of JS ends

because you're half a bottle of water for JS, you're not sloshing around here. These are regular writing, and the JS file must contain the code

function, connectWebViewJavascriptBridge (callback) {
If (window.WebViewJavascriptBridge) {
Callback (WebViewJavascriptBridge)
} else {
Document.addEventListener ('WebViewJavascriptBridgeReady', function () {
Callback (WebViewJavascriptBridge)
}, false)
ConnectWebViewJavascriptBridge (function (bridge) {
Bridge.init (function (message, responseCallback) {
Log ('JS, got, a, message', message)
"Var data = {'Javascript Responds':'Wee =}"
Log ('JS, responding, with', data)
ResponseCallback (data)


[_bridge >oc in

The [_bridge callHandler:] method in

oc, corresponding to bridge.registerHandler () in JS;