JS和OC相互调用并传值，WebViewJavascriptBridge 的使用

在iOS开发中难免会遇到js和oc交互，iOS8出现了WKWebView，WKWebView将逐步取代笨重的UIWebView。

这里就介绍使用WKWebView。

不使用WebViewJavascriptBridge的JS和OC调用方法如下

首先，介绍下JS调用OC的方式，JS调用OC的方法后端人员要与iOS开发人员约定好函数名称，以及参数格式。假如有个功能，应用加载后端提供的一个网页，网页内需要用到地图，调用地图，地图需要APP端展示而不是网页提供。这里就需要js调用OC类方法，调出地图并展示。我们首先在初始化WKWebView的时候，就需要添加监听，监听js的调用，如

这里就添加了一个函数名为getLocation的方法，js调用的时候，我们的app就可以监听到。

这里不算完，这里只是相当于注册了一个方法，让js调用getLocation时变得合法。

我们还需要在加载WKWebView的控制器内实现一个代理,WKScriptMessageHandler协议的一个方法

在这个方法里，我们可以获取到js端调用getLocation方法时传入的参数以及其他信息，可能一个网页需要注册多个方法，供JS端调用，所以这里需要根据message.name区分并加以调用。

接下来我们说下oc调用js.

这里setLocation就是js端提供的方法，供oc端调用，这个方法需要传递两个参数，经度和纬度，字符串JSResult就是拼接好的js方法，就可以用下面的方法直接调用。

这种也可以实现js和oc的交互。但项目开发中，往往需要js和oc相互调用并传值，比如js端想获取设备名称并展示出来，就需要，js调用oc的方法，oc响应之后获取设备名称并立即回传给js端以供展示用。利用上面的好像没法实现，其实也可以实现，就是js端再提供一个方法，供oc端调用，并接受参数，设备名称，那么这么一来，获取一个设备的名称就分成两步了，需要调用两次函数，一个是js调用oc,返回传值的时候oc再调用js，这个有点烦。

所以我们可以考虑下大神的WebViewJavascriptBridge，这个神器。

在podfile文件中加入 pod 'WebViewJavascriptBridge'

在用的地方引用相应的头文件。

在html文件中加入下段代码

function setupWebViewJavascriptBridge(callback) {

                    if(window.WebViewJavascriptBridge) {return callback(WebViewJavascriptBridge); }

                    if(window.WVJBCallbacks) {return window.WVJBCallbacks.push(callback); }

                    window.WVJBCallbacks = [callback];// 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。

                    var WVJBIframe = document.createElement('iframe');// 创建一个 iframe 元素

                    WVJBIframe.style.display ='none';

                    WVJBIframe.src ='wvjbscheme://__BRIDGE_LOADED__';// 设置 iframe 的 src 属性

                    document.documentElement.appendChild(WVJBIframe);// 把 iframe 添加到当前文导航上。

                    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) },0)

                }

    setupWebViewJavascriptBridge(function(bridge) {

                                 });

首先还是后端和APP端开发者商议确定调用方法名称以及传参格式。这里拿获取当前设备名称为例：

js端简单定义一个按钮，按钮触发方法为

function getDeviceName(){

        //此处第一个参数对应的是OC方法名；

        //第二个参数是js端要传给OC端的参数，不需要就传空

        //第三个参数就是js端回调函数，用于接收OC端传回的值，以便于js端做其他处理

WebViewJavascriptBridge.callHandler('getDeviceName',null,function(response) {

        alert(response);

        document.getElementById("returnValue").value = response;

        });

        }

在APP端实现相应的方法，getDeviceName.

当APP响应js调用后，获取到当前设备名称，然后通过responseCallback这个block回传给js端。

这样就实现了js调用oc，oc回传给js。

js端传递参数给OC端见例子。js和oc相互调用并传值