Obj-C與javascript交互之WebViewJavascriptBridge · iOS開發實踐篇

webview與js交互方式，調用js方法要在Obj-C中寫js代碼，這種方式非常臃腫，耦合性強。?WebViewJavascriptBridge框架就完美解決了webview的這缺點。 WebViewJavascriptBridge的原理也是通過webview的stringByEvaluatingJavaScriptFromString:方法調用JavaScript代碼；JavaScript調用Obj-C，則是通過web view的代理方法shouldStartLoadWithRequest：來接收JavaScript的網絡請求從而實現調用。 [WebViewJavascriptBridge下載地址](https://github.com/marcuswestin/WebViewJavascriptBridge) **WebViewJavascriptBridge的使用：** 1、把WebViewJavascriptBridge文件夾導入到項目中。 2、引入頭文件和聲明屬性。 ~~~ #import "WebViewJavascriptBridge.h" ... @property WebViewJavascriptBridge* bridge; ~~~ 3、Obj-C和javascript實例化 3.1、實例化WebViewJavascriptBridge。javascript發送的消息都在此處接收。 ~~~ //初始化WebViewJavascriptBridge _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"接收從javascript發送過來的信息: %@", data);//接受從js傳過來的值 responseCallback(@"oc影響信息"); //相應消息，發送到js }]; ~~~ 3.2 、javascript要和Obj-C交換，html／jsp 頁面必須要聲明方法并注冊WebViewJavascriptBridgeReady監聽。以下javascript代碼是固定寫法： ~~~ function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge); } else { document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge); }, false); } } connectWebViewJavascriptBridge(function(bridge) { //.....此處寫和oc交換的js代碼 }); ~~~ 3.3、javascript初始化WebViewJavascriptBridge. 這會調起 ‘WebViewJavascriptBridgeReady’ 的事件handler.Obj-C發送的消息都在此處接收。 ~~~ connectWebViewJavascriptBridge(function(bridge) { /* <span style="color: rgb(37, 37, 37); font-family: Monaco; font-size: 11px;">初始化 </span>Init your app here */ bridge.init(function(message, responseCallback) { alert("Javascript 接收從oc發送過來的信息: " + message); if (responseCallback) { responseCallback("javascript 響應信息") } }); }); ~~~ 4、發送消息 4.1、Obj-C發送消息給javascript。 ~~~ //發送消息給javascript [_bridge send:@"OC發送一條信息給javascript"]; ~~~ 4.2、javascript發送消息給Obj-c。 ~~~ bridge.send("javascript發送一條信息給OC"); ~~~ 5、Obj-c調用javascript。 5.1、javascript注冊handler(用于被Obj-c獲取該handler調用) ~~~ //注冊一個叫做 testJavascriptHandler 的handler(用于被oc獲取該handler調用) //data：接受oc傳的數據 responseCallback：相應后返回的數據 bridge.registerHandler("testJavascriptHandler", function(data, responseCallback) { alert("ObjC called testJavascriptHandler with："+data); var responseData = { 'Javascript Says':'Javascript已響應!' } responseCallback(responseData) }); ~~~ 5.2、Obj-c調用javascript代碼。 ~~~ //調用javascript叫做 testJavascriptHandler的handler. 在調用 handler成功后可以通過responseCallback block做出反應. [_bridge callHandler:@"testJavascriptHandler" data:@"我是oc傳過來的" responseCallback:^(id responseData) { //responseData :Javascript相應后返回的消息 NSLog(@"jJavascript Says：%@",responseData[@"Javascript Says"]); }]; ~~~ 6、javascript調用Obj-c 6.1、Obj-c注冊handler(用于被javascript獲取該handler調用) ~~~ //注冊一個叫做 testOCHandler 的handler [_bridge registerHandler:@"testOCHandler" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"testObjcCallback called: %@", data); responseCallback(@"Response from testOCCallback:oc已響應！"); }]; ~~~ 6.2、javascript調用Obj-c代碼。 ~~~ //調用oc叫做 testOCHandler的handler bridge.callHandler("testOCHandler","我是javascript傳過來的",function(response){ //response:oc響應后返回的數據 alert("oc響應后返回的數據:"+response); }); ~~~ 完整的Obj-c代碼 ~~~ // // ViewController.m // WebViewJavascriptBridge // #import "ViewController.h" #import "WebViewJavascriptBridge.h" @interface ViewController () @property WebViewJavascriptBridge *bridge; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIWebView *webView = [[UIWebView alloc] init]; webView.frame = self.view.frame; [self.view addSubview:webView]; NSURL *url = [NSURL URLWithString:@"http://localhost:8080/test/index.jsp"]; NSURLRequest *rquest = [NSURLRequest requestWithURL:url]; [webView loadRequest:rquest]; //初始化WebViewJavascriptBridge _bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"接收從javascript發送過來的信息: %@", data);//接受從js傳過來的值 responseCallback(@"oc影響信息"); //相應消息，發送到js }]; //發送消息給javascript [_bridge send:@"OC發送一條信息給javascript"]; //注冊一個叫做 testOCHandler 的handler [_bridge registerHandler:@"testOCHandler" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"testObjcCallback called: %@", data); responseCallback(@"Response from testOCCallback:oc已響應！"); }]; //調用javascript叫做 testJavascriptHandler的handler. 在調用 handler成功后可以通過responseCallback block做出反應. [_bridge callHandler:@"testJavascriptHandler" data:@"我是oc傳過來的" responseCallback:^(id responseData) { //responseData :Javascript相應后返回的消息 NSLog(@"jJavascript Says：%@",responseData[@"Javascript Says"]); }]; } @end ~~~ 完整的jsp頁面代碼 ~~~ <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  </head> <script type="text/javascript"> function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge); } else { document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge); }, false); } } connectWebViewJavascriptBridge(function(bridge) { /* Init your app here */ bridge.init(function(message, responseCallback) { alert("Javascript 接收從oc發送過來的信息: " + message); if (responseCallback) { responseCallback("javascript 響應信息") } }); var sendMessage = document.getElementById("sendMessage"); sendMessage.onclick = function(e){ bridge.send("javascript發送一條信息給OC"); } bridge.send("Please respond to this", function responseCallback(responseData) { //console.log("Javascript got its response", responseData) alert("Javascript 獲取響應信息"+ responseData); }) //注冊一個叫做 testJavascriptHandler 的handler(用于被oc獲取該handler調用) //data：接受oc傳的數據 responseCallback：相應后返回的數據 bridge.registerHandler("testJavascriptHandler", function(data, responseCallback) { alert("ObjC called testJavascriptHandler with："+data); var responseData = { 'Javascript Says':'Javascript已響應!' } responseCallback(responseData) }); var callbackButton = document.getElementById("buttons"); callbackButton.onclick = function(e){ e.preventDefault(); //調用oc叫做 testOCHandler的handler bridge.callHandler("testOCHandler","我是javascript傳過來的",function(response){ //response:oc響應后返回的數據 alert("oc響應后返回的數據:"+response); }); } }); </script> <body> <div id='buttons'>點擊WKWebViewJavascriptBridge方法調用oc方法</div> <div id='sendMessage'>點擊WKWebViewJavascriptBridge發送消息給oc</div> </body> </html> ~~~ 參考文章：[http://www.cocoachina.com/ios/20150629/12248.html](http://www.cocoachina.com/ios/20150629/12248.html) [demo下載地址](http://download.csdn.net/detail/zhixinhuacom/9384749)