1.url的認(rèn)識(shí)
在談到native與H5交互的時(shí)候，我們先要了解URL，剛?cè)腴T(mén)的同學(xué)，不太了解URL怎么去拆分，下面先拿簡(jiǎn)書(shū)http://www.lxweimin.com/recommendations/notes?category_id=56（協(xié)議://主機(jī)：端口/路徑?字段#片段，scheme://host:port/path?query#fragment）這個(gè)URL來(lái)解釋?zhuān)?/p>
http是協(xié)議(URL.scheme)，www.lxweimin.com為主機(jī)(URL.host)，recommendations/notes為路徑(URL.path)，category_id=56為字段query（片段fragment省略）；
2.了解了URL后，我們與H5制定一個(gè)協(xié)議，通過(guò)截取URL里面的字段，來(lái)觸發(fā)這個(gè)協(xié)議方法：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
H5 loading幾個(gè)URL，就會(huì)加載幾次。
3.（1） 包括第三方，所有H5調(diào)native的方法，都是通過(guò)攔截的方式；
比如點(diǎn)擊H5里面的某個(gè)按鈕，H5調(diào)native，其實(shí)就是觸發(fā)加載這個(gè)網(wǎng)頁(yè)，攔截到后，然后native自己實(shí)現(xiàn)方法；
（2） native點(diǎn)擊觸發(fā)H5的方法為：[self.webView stringByEvaluatingJavaScriptFromString:@“hide()”];其中“hide()”是H5那邊的方法。
stringByEvaluatingJavaScriptFromString
(1). js調(diào)native的方法：
原理也是攔截URL，只需告訴Js調(diào)@"ObjC Echo”這個(gè)方法就可以：[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
(2). native調(diào)js的方法：
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {這個(gè)方法等同原生方法[self.webView stringByEvaluatingJavaScriptFromString:@"JS Echo"];
4. WebViewJavascriptBridge
一開(kāi)始，我們?cè)贜ative端和JS端都分別進(jìn)行初始化
OC端：
@property WebViewJavascriptBridge* bridge;
對(duì)應(yīng)的初始化代碼如下，在初始化中直接包含了一個(gè)用于接收J(rèn)S的回調(diào)：
_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端：(以下是固定寫(xiě)法，你自己的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中如果調(diào)用了bridge.send()，那么將觸發(fā)OC端_bridge初始化方法中的回調(diào)。
同理，第二條，在JS中調(diào)用了bridge.callHandler('testJavascriptHandler')，它將觸發(fā)OC端注冊(cè)的同名方法:
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端調(diào)用：
WVJB RCVD -> block內(nèi)部-> 再block內(nèi)部回調(diào)回web 用WVJB SEND（如果沒(méi)有回調(diào)就沒(méi)有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)
})
}
})
客戶(hù)端調(diào)用：: WVJB SEND ->WVJB RCVD - >block回調(diào)
[_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
