WebViewJavascriptBridge使用和原理剖析

发表于 |

WebViewJavascriptBridge的github地址

WebViewJavascriptBridge的基本原理

在WebViewJavascriptBridge.m的文件重写了UIWebView的shouldStartLoadWithRequest:navigationType方法，此方法在html页面的js动作触发时、url变化的时、网页内容变化的时会自动调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //判断这个UIWebView是否注册了WebViewJavascriptBridge
    if (webView != _webView) { return YES; }
    //获取请求的URL
    NSURL *url = [request URL];
    __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    //通过检查scheme和host，就可以清楚的知道，这个请求是不是WebViewJavascriptBridge的重定向请求。
    if ([_base isWebViewJavascriptBridgeURL:url]) {
        //判断URL是否是需要bridge的URL
        if ([_base isBridgeLoadedURL:url]) {
            //通过injectJavascriptFile方法注入JS
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            //判断URL是否是队列消息，若是，则执行查询命令JS并刷新消息队列
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
        } else {
            //URL被识别为未知的消息。
            [_base logUnkownMessage:url];
        }
        return NO;
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

js调用oc方法

总结：

1.首先是在UIViewController 里面实例化 一个bridge 通过bridge 注册一个 handler 然后保存在messageHandlers中

2.点击网页的button的时候 把信息保存起来生成一个message 字典 三个key（handlerName ， data，callbackId（后边通过这个来找到之前的responseCallback方法）） 并且把 其中的responseCallback 保存起来，并且改变iframe.src（改变iframe.src会执行shouldStartLoadWithRequest:navigationType方法）

3.这个时候 webView 执行代理方法，在这里面取出2步存起来的信息 然后给1步的handler中的responseCallback赋值，并且执行 1步注册的方法

所以结果就是 执行oc的回调方法 然后在oc的回调方法里面再去执行 刚刚被赋值的 responseCallback方法（这个方法的响应结果体现在web中）至于这个responseCallback被赋值的过程就是通过第二步的callbackId 找到相应的方法赋过去。

oc调用js方法

1.如果有callbakId存在 那么就给实现 responseCallback 这个方法（并不调用）

2 如果message.handlerName存在 那么就取出messageHandlers中 message.handlerName 对应的方法 这个方法一般是在js代码中注册过的。

注册方法

1
2
3
4
5
6
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
			log('ObjC called testJavascriptHandler with', data)
			var responseData = { 'Javascript Says':'Right back atcha!' }
			log('JS responding with', responseData)
			responseCallback(responseData)
})

这里最后 如果既有handler 又有callback 就会把第一步实现的方法赋值给handler的 responseCallback 然后在执行到handler的最后一句 responseCallback(responseData) 时候 再执行 执行这个回调。

JS端如何使用

JS端代码，我是直接复制了Demo里面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html><head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<style type='text/css'>
		html { font-family:Helvetica; color:#222; }
		h1 { color:steelblue; font-size:24px; margin-top:24px; }
		button { margin:0 3px 10px; font-size:12px; }
		.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
	</style>
</head><body>
	<h1>WebViewJavascriptBridge Demo</h1>
	<script>
	window.onerror = function(err) {
		log('window.onerror: ' + err)
	}
    <!--这段代码是固定的，必须要放到js中的，应该是js注册WebViewJavascriptBridge的-->
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    <!--与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS-->
    setupWebViewJavascriptBridge(function(bridge) {
		var uniqueId = 1
		function log(message, data) {
			var log = document.getElementById('log')
			var el = document.createElement('div')
			el.className = 'logLine'
			el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
			if (log.children.length) { log.insertBefore(el, log.children[0]) }
			else { log.appendChild(el) }
		}
       <!--JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC-->
		bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
			log('ObjC called testJavascriptHandler with', data)
			var responseData = { 'Javascript Says':'Right back atcha!' }
			log('JS responding with', responseData)
			responseCallback(responseData)
		})

		document.body.appendChild(document.createElement('br'))

		var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
		callbackButton.innerHTML = 'Fire testObjcCallback'
		callbackButton.onclick = function(e) {
			e.preventDefault()
			log('JS calling handler "testObjcCallback"')
			<!--我们在这注册一个js调用OC的方法,并携带参数,当OC收到并且回调通知JS-->
			bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
				log('JS got response', response)
			})
		}
	})
	</script>
	<div id='buttons'></div> <div id='log'></div>
</body></html>

在JS端，嵌入步骤是：

第一步：将下面的代码放在JS中：

1
2
3
4
5
6
7
8
9
10
11
<!--这段代码是固定的，必须要放到js中的，应该是js注册WebViewJavascriptBridge的-->
   function setupWebViewJavascriptBridge(callback) {
       if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
       if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
       window.WVJBCallbacks = [callback];
       var WVJBIframe = document.createElement('iframe');
       WVJBIframe.style.display = 'none';
       WVJBIframe.src = 'https://__bridge_loaded__';
       document.documentElement.appendChild(WVJBIframe);
       setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
   }

这段代码是固定的，必须要放到js中。

1
2
3
setupWebViewJavascriptBridge(function(bridge) {
		所有与iOS交互的JS代码放这里！
})

JS如何调用iOS代码

通过bridge.callHandler来调用：

1
2
3
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
		log('JS got response', response)
})

其中，各参数说明如下：

testObjcCallback：是iOS端register的handleName，在iOS端注册后，JS就可以直接通过这个handleName与iOS交互。比如，当点击某个按钮时，就执行上面这一段代码，结果就是js端将参数传给了iOS端，iOS端收到参数，然后通过回调给js，js会收到response，然后打印出来。

{‘foo’: ‘bar’}这是JSON字符串，传到iOS端会被WebViewJavascriptBridge自动转换成id对象，然后在回调处看到的就是字典对象了。

function(response)这是个js函数，在iOS端收到回调后，拿到了参数，然后通过闭包回调反馈给js端，这个反馈就是通过js函数来传值给js。

###JS端加入WebViewJavascriptBridge代码注意事项

如果在下面的函数体内有任何错误，都不会有打印日志，也不会有任何回调：

1
2
3
setupWebViewJavascriptBridge(function(bridge) {
        所有与iOS交互的JS代码放这里！
})

因此，如果遇到什么也没有输出，说明你写错了。另外，上面有demo中，log函数是自定义的，不是系统的，因此如果没有加入这个函数的定义，调用它也会导致不能交互。

iOS端如何使用

第一步：开启日志

1
2
// 开启日志，方便调试
[WebViewJavascriptBridge enableLogging];

第二步：给ObjC与JS建立桥梁

1
2
3
4
// 给哪个webview建立JS与OjbC的沟通桥梁
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
// 设置代理，如果不需要实现，可以不设置
[_bridge setWebViewDelegate:self];

第三步：注册HandleName，用于给JS端调用iOS端

1
2
3
4
5
6
7
8
9
// JS主动调用OjbC的方法
// 这是JS会调用testObjcCallback方法，这是OC注册给JS调用的
// JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传
// OC端通过responseCallback回调JS端，JS就可以得到所需要的数据
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called: %@", data);
        // 反馈给JS
        responseCallback(@"Response from testObjcCallback");
    }];

第四步：直接调用JS端注册的HandleName

1
2
3
4
5
6
7
//需要传给JS端的数据
id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
// 这是OC会调用JS端写好的方法testJavascriptHandler方法，这是JS注册给OC调用的
//block回调，JS端接收到参数回调给OC，OC端打印
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
        NSLog(@"testJavascriptHandler responded: %@", response);
}];

源代码

这篇博客用的是GitHub上原版的Demo写的，需要看源码的直接下载官方demo对照着看就可以了。