Obj-C与javascript交互之WebViewJavascriptBridge

最新推荐文章于 2022-01-06 12:41:02 发布

沸羊羊一个

最新推荐文章于 2022-01-06 12:41:02 发布

阅读量1.4k

点赞数 1

分类专栏： IOS iOS开发实践篇

本文链接：https://blog.csdn.net/zhixinhuacom/article/details/50437721

版权

IOS 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

iOS开发实践篇

18 篇文章 0 订阅

订阅专栏

webview与js交互方式，调用js方法要在Obj-C中写js代码，这种方式非常臃肿，耦合性强。 WebViewJavascriptBridge框架就完美解决了webview的这缺点。

WebViewJavascriptBridge的原理也是通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码；JavaScript调用Obj-C，则是通过web view的代理方法shouldStartLoadWithRequest：来接收JavaScript的网络请求从而实现调用。

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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </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

demo下载地址