JS与OC交互文档（Web端）

1、iOS系统API交互方式

1.1、Objective-C调用Javascript方法

　　前提：

　　UIWebView已经完全加载完成包含需要调用的页面（注：在UIWebViewDelegate托管中通过监视- (void)webViewDidFinishLoad:(UIWebView *)webView调用来确定页面是否加载完成）。

方法：

　　假设某视图对象的子视图属性self.webview加载的页面包含如下Javascript函数：

　　function getString(){ return “Hello javascript!”;}

　　并且该函数在该页面上可被正常调用，则可以通过形如下面的Objectvie-C方法调用此函数：

　　NSString *str = [self.webview stringByEvaluatingJavaScriptFromString:@“getString()"];

　　该函数调用实际模拟了页面上的一次Javascript函数调用，因此在该函数内部任何有效的Javascript代码都可被执行！该Objective-C代码返回值为被调用的Javascript代码的返回值，在上例中，str的值将被赋为@”Hello javascript!”。

　　被调用的函数可以带有字符串或数值型的参数。若调用的Javascript函数名称带有参数，需保证传进去的参数的格式正确性，特别是字符串参数的引号很容易被忽略。

1.2、客户端响应页面Javascript代码

　　前提：

需要实现UIWebViewDelegate的- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType托管函数（以下简称跳转监视函数）并将实现了该托管函数的对象设置为UIWebView的delegate。

方法：

UIWebView的当前页面将要被Javascript代码通过以下方式转向的时候，会调用上述跳转监视函数：

window.location.href=”http://www.strongsoft.net”;

　　此时实现了该托管协议的对象的跳转监视函数会被调用，通过如下代码监视浏览器跳转的地址：

NSString *url = [[request URL] absoluteString];

　　若该托管函数返回值为NO，则页面UIWebView的页面跳转将被否决。利用这一思路，监视页面上的特定格式的跳转地址加以拦截，并执行相应的本地代码，即可实现Javascript与Objective-C代码的交互。

例如，规定拦截URL地址前缀为”objc:”的所有地址，并且用if…else…语句判定本地需要执行的代码，比如执行doFunc1函数，那么可通过如下Javascript函数进行：

window.location.href=”objc:doFunc1”;

此方式实现JS向客户端传递的消息存在于href的字符串中，客户端通过解析字符串提取所需信息。

2、引入第三方库WebViewJavascriptBridge进行交互

　　WebViewJavascriptBridge优雅地实现了在使用 UIWebView 时 JS 与 iOS 的 OC 之间的互调，支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。就像项目的名称一样，它是连接UIWebView和Javascript的bridge。在加入这个项目之后，他们之间的交互处理方式变得很友好。

　　一起来看看它的实现吧，它总共就包含了三个文件：

　　1 WebViewJavascriptBridge.h

　　2 WebViewJavascriptBridge.m

　　3 WebViewJavascriptBridge.js.txt

　　WebViewJavascriptBridge.js.txt 主要用于衔接 UIWebView 中的 web page ，而 WebViewJavascriptBridge.h/m 则主要用于与 OC 的 native code 打交道。他们作为一个整体，其实起到了一个“桥梁”的作用，这三个文件封装了他们具体的交互处理方式，只开放出一些对外的涉及到业务处理的API，因此你在需要UIWebView与Native code交互的时候，引入该库，则无需考虑太多的交互上的问题。

　　出于表达上的需要，对于UIWebView相关的我就称之为Web端，而objc那端的处理代码称之为Native端。

　　Web端以及Native端完全是对等的两端，实现也是对等的。一段是消息的发送端，另一段就是接收端。这里为引起混淆，需要解释一下我这里使用的“响应”、“回调”在这个上下文中的定义：

　　(1) 响应：接收端给予发送端的应答

　　(2) 回调：发送端收到接收端的应答之后在接收端调用的处理逻辑

下面罗列一下它可以实现的功能（Web端）：

Web端在初始化时支持设置消息的默认处理器(这里的消息指的是从Native端接收到的消息)
从Web端向Native端发送消息，并支持对于Native端响应后的回调处理的定义
Web端调用Native定义的处理器，并支持Native端响应后的回调处理定义
Web端注册处理器(供Native端调用)，并支持给Native端响应处理逻辑的定义

//给WebViewJavascriptBridgeReady事件注册一个Listener

document.addEventListener('WebViewJavascriptBridgeReady', onBridgeReady, false)

//事件的响应处理

function onBridgeReady(event) {

var bridge = event.bridge

//初始化操作，并定义默认的消息处理逻辑

bridge.init(function(message) {

log('JS got a message', message)

})

//注册一个名为testJavascriptHandler的处理器，并定义用于响应的处理逻辑(该处理器可在native端调用名为testJavascriptHandler的处理器后，进行响应操作)

bridge.registerHandler('testJavascriptHandler', function(data, response) {

log('JS handler testJavascriptHandler was called', data)

response.respondWith({ 'Javascript Says':'Right back atcha!' })

})

//创建一个发送消息给native端的按钮

var button = document.getElementById('buttons').appendChild(document.createElement('button'))

button.innerHTML = 'Send message to ObjC'

button.ontouchstart = function(e) {

e.preventDefault()

//发送消息

bridge.send('Hello from JS button')

}

document.body.appendChild(document.createElement('br'))

//创建一个用于调用native端处理器的按钮

var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))

callbackButton.innerHTML = 'Fire testObjcCallback'

callbackButton.ontouchstart = function(e) {

e.preventDefault()

log("Calling handler testObjcCallback”)

//调用名为testObjcCallback的native端处理器，并传递参数，同时设置回调处理逻辑（与上面对应，客户端也需register一个同样名称的处理器来进行相应响应）

bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {

log('Got response from testObjcCallback', response)

})

}

3、iOS 8以上系统的交互

　　iOS 8之后引入了WKWebView,客户端有系统API来处理Web端发送过来的消息，Web端需要做的也精简不少，代码如下：

　　window.webkit.messageHandlers.testObjcCallbackIniOS8.postMessage({

　　　　"infomation": "someData","

　　});

其中，testObjcCallbackIniOS8是Web端调用Native端的处理器的名称，Native端可在相应方法中，进行判断并处理。

五、参考资料

http://zh.5long.me/2015/ios-objective-c-javascript-bridge/ 《iOS开发之Objective-C(Swift)与JavaScript交互·WebViewJavascriptBridge使用篇》
http://www.cnblogs.com/YouXianMing/p/3738317.html 《使用WebViewJavascriptBridge与UIWebView交互》
http://blog.csdn.net/yanghua_kobe/article/details/8209751 《优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案》