native与H5交互方法

1.url的认识

在谈到native与H5交互的时候，我们先要了解URL，刚入门的同学，不太了解URL怎么去拆分，下面先拿简书http://www.jianshu.com/recommendations/notes?category_id=56（协议://主机：端口/路径?字段#片段，scheme://host:port/path?query#fragment）这个URL来解释：

http是协议(URL.scheme)，www.jianshu.com为主机(URL.host)，recommendations/notes为路径(URL.path)，category_id=56为字段query（片段fragment省略）；

2.了解了URL后，我们与H5制定一个协议，通过截取URL里面的字段，来触发这个协议方法：

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

H5 loading几个URL，就会加载几次。

3.（1） 包括第三方，所有H5调native的方法，都是通过拦截的方式；

比如点击H5里面的某个按钮，H5调native，其实就是触发加载这个网页，拦截到后，然后native自己实现方法；

（2） native点击触发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()，那么将触发OC端_bridge初始化方法中的回调。
同理，第二条，在JS中调用了bridge.callHandler('testJavascriptHandler')，它将触发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内部-> 再block内部回调回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框架网址：http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html或者http://www.cocoachina.com/ios/20150629/12248.html