UIWebView与JS的交互

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS简易交互的方法，参见我另一篇博客

直到我在Github上看到了WebViewJavascriptBridge 这个用于UIWebView/WebViews和JS交互的封装库。

一开始，我们在Native端和JS端都分别进行初始化：

OC端：

1	@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)

     })

}

然后，我们要知道，在WebViewJavascriptBridge中，交互的方式只有两种：send 和 callHandle，JS和OC都有这两个方法，所以对应的四种关系是：

以上表中的对应关系的解读是，例如第一条：在JS中如果调用了bridge.send()，那么将触发OC端_bridge初始化方法中的回调。

同理，第二条，在JS中调用了bridge.callHandler('testJavascriptHandler')，它将触发OC端注册的同名方法:

1 2 3 4 5 6

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) })

了解了使用规则，下面来看看在我们这个实际需求中应用的整体思路：

Tips

由于我用的是Sublime Text,所以无法进行JS的调试。如果要用Atom调试，又感觉有点小题大做。我就是想要有个地方可以轻松地看到是否打印出了console.log或者JS函数是否被调用了。始终相信，任何问题都是可以解决的。我们可以用Safari。

连上你的iPhone或者使用模拟器，当你的程序当前显示了一个UIWebView，Safari会自动识别这个UIWebview，并可以在开发菜单栏中找到你的设备进行调试。