1.url的認識
在談到native與H5交互的時候尿扯，我們先要了解URL狡逢，剛入門的同學颖变，不太了解URL怎么去拆分咸产，下面先拿簡書http://www.reibang.com/recommendations/notes?category_id=56（協(xié)議://主機：端口/路徑?字段#片段盖高，scheme://host:port/path?query#fragment）這個URL來解釋：
http是協(xié)議(URL.scheme)慎陵，www.reibang.com為主機(URL.host)眼虱，recommendations/notes為路徑(URL.path)，category_id=56為字段query（片段fragment省略）席纽；
2.了解了URL后捏悬，我們與H5制定一個協(xié)議，通過截取URL里面的字段润梯，來觸發(fā)這個協(xié)議方法：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
H5 loading幾個URL过牙，就會加載幾次。
3.（1） 包括第三方纺铭，所有H5調native的方法寇钉，都是通過攔截的方式；
比如點擊H5里面的某個按鈕舶赔，H5調native扫倡，其實就是觸發(fā)加載這個網(wǎng)頁，攔截到后竟纳，然后native自己實現(xiàn)方法撵溃；
（2） native點擊觸發(fā)H5的方法為：[self.webView stringByEvaluatingJavaScriptFromString:@“hide()”];其中“hide()”是H5那邊的方法。
stringByEvaluatingJavaScriptFromString
(1). js調native的方法：
原理也是攔截URL锥累，只需告訴Js調@"ObjC Echo”這個方法就可以：[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
(2). native調js的方法：
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {這個方法等同原生方法[self.webView stringByEvaluatingJavaScriptFromString:@"JS Echo"];
4. WebViewJavascriptBridge
一開始缘挑，我們在Native端和JS端都分別進行初始化
OC端：
@property WebViewJavascriptBridge* bridge;
對應的初始化代碼如下，在初始化中直接包含了一個用于接收JS的回調：
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC received message from JS: %@", data);
responseCallback(@"Response for message from ObjC");
}];
JS端：(以下是固定寫法揩悄，你自己的JS文件中必須包含如下代碼)
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)
})
}
在JS中如果調用了bridge.send()卖哎，那么將觸發(fā)OC端_bridge初始化方法中的回調。
同理删性，第二條亏娜，在JS中調用了bridge.callHandler('testJavascriptHandler')，它將觸發(fā)OC端注冊的同名方法:
js中的代碼
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"')
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
OC中的代碼
web端調用：
WVJB RCVD -> block內(nèi)部-> 再block內(nèi)部回調回web 用WVJB SEND（如果沒有回調就沒有SEND）
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];
web端代碼：
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
})
客戶端調用：: WVJB SEND ->WVJB RCVD - >block回調
[_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }];
然后web端代碼：
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)
})
第三方WebViewJavascriptBridge框架網(wǎng)址：http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html或者http://www.cocoachina.com/ios/20150629/12248.html
