WebViewJavascriptBridge初识

摘要: 网上关于原生和JS的调用的介绍很多，github上使用方法介绍的很清晰，本文只是对其整理，方便以后查看。

1、WebViewJavascriptBridge资源 github代码资源

原理:

2、使用Usage

2.1 导入头文件

import "WebViewJavascriptBridge.h
// 声明变量
@property WebViewJavascriptBridge* bridge;

2.2 将创建的webview 添加桥接

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

2.3 原生

---

registerHandler~~~原生处理
callHandler~~~JS处理

---

原生响应JS调用 和 原生调用JS

// 原生响应JS：原生注册testObjcCallback方法，当JS被触发时，原生可以响应并处理；
[self.bridge registerHandler:@"testObjcCallback"
                     handler:^(id data, WVJBResponseCallback responseCallback){

    NSLog(@"testObjcCallback called: %@", data);
    responseCallback(data);
}];

// 原生调用JS: 当原生被触发时，原生调用testJavascriptHandler，JS可以响应并处理
[self.bridge callHandler:@"testJavascriptHandler"
                   data:nil 
       responseCallback:^(id responseData){

    NSLog(@"testJavascriptHandler responded: %@", responseData);
}];

2.4 JS处理

2.4.1 将下面一段代码Copy到你的JS中

 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 = 'http://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

2.4.2 最后, JS 中实现 setupWebViewJavascriptBridge 方法，并且用桥接去注册方法和实现ObjC方法响应

setupWebViewJavascriptBridge(function(bridge) 
{
    /* Initialize your app here */
     // JS调用原生：
    bridge.registerHandler('testObjcCallback', function(data, responseCallback) {
        console.log("JS testObjcCallback called with:", data)
        responseCallback(data)
    })
     //JS响应原生调用 :/
    bridge.callHandler('testJavascriptHandler', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

3、优缺点

【优】可以实现原生和H5之间的交互
【缺】每次新加方法必须更新原生，不能实现热更新

4、值得看的博客

http://www.cnblogs.com/TheYouth/p/5854467.html