OC和JS的交互,native页面和web页面混合
2016-08-04 15:57
246 查看
这里照搬Github的Demo,其实还是很易懂的,首先,要在控制器的.h文件当中实现浏览器控件的协议:
在.m方法当中,WebViewJavascriptBridge并没有直接复写代理方法,而是这样实现的:
这个框架定义了两种OC和JS之间通信的方式,一种是send,发送一条消息,另一种是通过一个key调用callHandler,注意上方红色的方法,这两个方法接收js返回回来的data并显示,之后调用那个了responseCallback方法,给js回发一条消息,也就是回调。
OC可以相应JS发来的消息,也可以主动给JS发消息,Demo当中提取了两个方法:
其中在JS端,可以有多个handler,所以callHandler需要一个key来寻找指定方法。responseCallback用于响应JS处理完毕后对OC的回调。
下面是JS端:
bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler,并对OC进行回调。
之后定义了两个按钮,通过上述两种方式直接调用OC,并处理OC回发的响应信息。
if (_bridge) {return; }
self.webView.delegate=self;
self.webView.scalesPageToFit
= YES;
[WebViewJavascriptBridgeenableLogging];
_bridge = [WebViewJavascriptBridgebridgeForWebView:self.webView];
[_bridgesetWebViewDelegate:self];
//接收数据 JS调用OC本地的方法,
并且可以拿到JS传过来的信息数据
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];
NSString *deviceInfo = [DeviceUtils getDeviceInfo];
// // id data = @{@"greetingFromObjC": deviceInfo};
//发数据
也就是捕获JS页面的事件
并且发送信息给JS
[_bridge callHandler:@"testJavascriptHandler" data:deviceInfo responseCallback:^(id response) {
DLog(@"testJavascriptHandler responded: %@", response);
}];
- (void)backBtnPressed
{
if (_isFirstWebView) {
[self.navigationControllerpopViewControllerAnimated:YES];
}else{
if (self.webView) {
[self.webViewgoBack];
}
}
}
(void)callHandler:(id)sender {
NSString *deviceInfo = [DeviceUtilsgetDeviceInfo];
// id data = @{@"greetingFromObjC": deviceInfo};
//发数据
[_bridgecallHandler:@"testJavascriptHandler"data:deviceInfo
responseCallback:^(id response) {
NSLog(@"testJavascriptHandler responded: %@", response);
}];
}
[selfcallHandler:nil];
1 #import 2 3 @interface ExampleAppViewController : UINavigationController 4 5 @end
在.m方法当中,WebViewJavascriptBridge并没有直接复写代理方法,而是这样实现的:
1 @interface ExampleAppViewController () 2 @property WebViewJavascriptBridge* bridge; 3 @end 4 5 @implementation ExampleAppViewController 6 7 //在页面显示出来之前,注册bridge对象 8 - (void)viewWillAppear:(BOOL)animated { 9 if (_bridge) { return; } 10 11 UIWebView* webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)]; 12 [self.view addSubview:webView]; 13 14 //开启调试信息 15 [WebViewJavascriptBridge enableLogging]; 16 17 //响应JS通过send发送给OC的消息 18 _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { 19 NSLog(@"ObjC received message from JS: %@", data); 20 responseCallback(@"Response for message from ObjC"); 21 }]; 22 23 //响应JS通过callhandler发送给OC的消息 24 [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) { 25 NSLog(@"testObjcCallback called: %@", data); 26 responseCallback(@"Response from testObjcCallback"); 27 }]; 28 29 [self renderButtons:webView]; 30 [self loadExamplePage:webView]; 31 }
这个框架定义了两种OC和JS之间通信的方式,一种是send,发送一条消息,另一种是通过一个key调用callHandler,注意上方红色的方法,这两个方法接收js返回回来的data并显示,之后调用那个了responseCallback方法,给js回发一条消息,也就是回调。
OC可以相应JS发来的消息,也可以主动给JS发消息,Demo当中提取了两个方法:
1 //OC调用send给JS发消息 2 - (void)sendMessage:(id)sender { 3 [_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) { 4 NSLog(@"sendMessage got response: %@", response); 5 }]; 6 } 7 8 //OC调用callHandler给JS发消息 9 - (void)callHandler:(id)sender { 10 id data = @{ @"greetingFromObjC": @"Hi there, JS!" }; 11 [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) { 12 NSLog(@"testJavascriptHandler responded: %@", response); 13 }]; 14 }
其中在JS端,可以有多个handler,所以callHandler需要一个key来寻找指定方法。responseCallback用于响应JS处理完毕后对OC的回调。
下面是JS端:
JS的关键在于connectWebViewJavascriptBridge函数,log方法用于输出日志,是用户的自定义函数,所有的自定义函数都要写在connectWebViewJavascriptBridge当中作为成员。
bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler,并对OC进行回调。
之后定义了两个按钮,通过上述两种方式直接调用OC,并处理OC回发的响应信息。
if (_bridge) {return; }
self.webView.delegate=self;
self.webView.scalesPageToFit
= YES;
[WebViewJavascriptBridgeenableLogging];
_bridge = [WebViewJavascriptBridgebridgeForWebView:self.webView];
[_bridgesetWebViewDelegate:self];
//接收数据 JS调用OC本地的方法,
并且可以拿到JS传过来的信息数据
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];
NSString *deviceInfo = [DeviceUtils getDeviceInfo];
// // id data = @{@"greetingFromObjC": deviceInfo};
//发数据
也就是捕获JS页面的事件
并且发送信息给JS
[_bridge callHandler:@"testJavascriptHandler" data:deviceInfo responseCallback:^(id response) {
DLog(@"testJavascriptHandler responded: %@", response);
}];
- (void)backBtnPressed
{
if (_isFirstWebView) {
[self.navigationControllerpopViewControllerAnimated:YES];
}else{
if (self.webView) {
[self.webViewgoBack];
}
}
}
(void)callHandler:(id)sender {
NSString *deviceInfo = [DeviceUtilsgetDeviceInfo];
// id data = @{@"greetingFromObjC": deviceInfo};
//发数据
[_bridgecallHandler:@"testJavascriptHandler"data:deviceInfo
responseCallback:^(id response) {
NSLog(@"testJavascriptHandler responded: %@", response);
}];
}
[selfcallHandler:nil];
相关文章推荐
- oc与js交互-----WKWebView
- OC-JS交互(WebViewJavascriptBridge使用说明)
- IOS WebView OC与JS 交互 WebViewJavascriptBridge
- 安卓混合开发中原生页面与web页面的交互
- IOS 开发OC 与JS 交互 WebviewJavaScriptBridge 的简单实用(二)
- web页面中通过js方法回调部分native的功能出现错误 Object [object Object] has no method 'openI***e' at null:1
- [js&oc交互]WebViewJavascriptBridge简单实用
- 源码推荐(01.20B):JS与OC中Webview交互, 两行代码搞定TouchID验证
- OC与js交互获取webview元素和赋值
- webView中OC和JS交互
- 如何实现WebView和js页面的交互
- 通过WebViewJavascriptBridge实现OC与JS交互
- IOS 开发 OC(Object_C)与前端页面JS(JavaScript)交互整理(一)
- iOS开发使用WebViewJavascriptBridge实现OC与JS交互
- android webview 初学实例-页面JS与后台交互
- Android实现js及webview交互之在html页面中调用系统摄像头
- 使用WebViewJavascriptBridge实现OC与JS交互
- JS与OC的交互 WebViewJavaScriptBridge WEB微信支付
- android WebView访问本地页面swf交互JS权限 #2060错误
- JS和Native交互之 -WebViewJavascriptBridge