WebViewJavascriptBridge的使用和原理
2015-09-07 23:54
731 查看
工作中有用到WebViewJavascriptBridge,正好最近也在学习网页开发就把这个看了一下。首先得说明的是,WebViewJavascriptBridge绝对是一个好东西,简单易用,即使源码也非常容易看懂。(废话,这么多人用,当然好)
关于客户端和网页的交互完全就是靠苹果开放的以下两个方法:
1:stringByEvaluatingJavaScriptFromString:
2:webView:shouldStartLoadWithRequest:navigationType:
第一个方法是客户端向网页中注入JS程序,把js程序以NSString形式写出,执行后会返回js程序返回的内容。第二个方法是网页发生重定向时调用的。
客户端和网页的交互无非是,客户端可以指定调用js的程序;js也可以指定调用客户端的程序。前者相对来说简单点,用上面第一个方法就可以。后者,正常情况下我们办不到,WebViewJavascriptBridge也不办不到。但是,实践证明WebViewJavascriptBridge又是可以直接调用的,出于好奇就看了源码,才在此记录下。
先不急于看其具体工作工程,先看一下其使用。
本着优质代码的本质,WebViewJavascriptBridge使用也是非常简单的。
1,直接把以下五个文件添加到工程中(ARC):
2,初始化WebViewJavascriptBridge,设置_webView的代理必须在此过程之前,因为在初始化过程中会把webview的代理给替换成Bridge。如果在此过程之后设置_webView的代理那么WebViewJavascriptBridge将失效,因为bridge的webView:shouldStartLoadWithRequest:navigationType:永远调不到了。
3,客户端调用JS的代码如下:
关于客户端和网页的交互完全就是靠苹果开放的以下两个方法:
1:stringByEvaluatingJavaScriptFromString:
2:webView:shouldStartLoadWithRequest:navigationType:
第一个方法是客户端向网页中注入JS程序,把js程序以NSString形式写出,执行后会返回js程序返回的内容。第二个方法是网页发生重定向时调用的。
客户端和网页的交互无非是,客户端可以指定调用js的程序;js也可以指定调用客户端的程序。前者相对来说简单点,用上面第一个方法就可以。后者,正常情况下我们办不到,WebViewJavascriptBridge也不办不到。但是,实践证明WebViewJavascriptBridge又是可以直接调用的,出于好奇就看了源码,才在此记录下。
先不急于看其具体工作工程,先看一下其使用。
本着优质代码的本质,WebViewJavascriptBridge使用也是非常简单的。
1,直接把以下五个文件添加到工程中(ARC):
2,初始化WebViewJavascriptBridge,设置_webView的代理必须在此过程之前,因为在初始化过程中会把webview的代理给替换成Bridge。如果在此过程之后设置_webView的代理那么WebViewJavascriptBridge将失效,因为bridge的webView:shouldStartLoadWithRequest:navigationType:永远调不到了。
-(void)initWebViewBridge{ [WebViewJavascriptBridge enableLogging]; /* * 初始化 * 1,JS调用[_bridge send] 即JS调用本地_brigde init()中回调block * 此时OC不需要额外的代码,只需要在OC的WebViewJavascriptBridge初始化时把回调代码写好即可 */ self.bridge = [WebViewJavascriptBridge bridgeForWebView:_webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"init-objc received data : %@",data); responseCallback(@"init-Response from Objc"); }]; /* * 2,JS调用[_bridge callHandler] 即js调用oc的_brigde registerHandler中注册的方法回调block * 此时OC需要用registerHandler:handler:注册对应JS中的方法,并写好回调代码 */ [_bridge registerHandler:@"testJsCallOC" handler:^(id data, WVJBResponseCallback responseCallback) { //data是js传过来的值,由oc处理 NSLog(@"testJsCallOC-objc received data:%@",data); //OC执行responseCallback来回调JS responseCallback(@"testJsCallOC-Response from Objc"); }]; }至此,客户端的工作已经基本完成了,JS就可以调用客户端的代码了。_bridge registerHandler可以执行N多次,只要保证handler名称网页端是知道的即可。
3,客户端调用JS的代码如下:
/* * 1,[_bridge send] native发送消息给js,调用js的init()中的方法,native不接收回调函数 */ -(void)bridgeSendMsg{ NSLog(@"%s",__func__); [self.bridge send:@"This message from OC, donnot need callback"]; } /* * 2,[_bridge send: responseCallback:] oc发送消息给js,调用js的init()中的方法,native接收回调 */ -(void)bridgeSendMsgAndResponse{ NSLog(@"%s",__func__); [_bridge send:@"This message from OC, need callback a28b " responseCallback:^(id responseData) { //当js执行OC的回调时 NSLog(@"js response oc with data:%@",responseData); }]; } /* * 3,[_bridge callHandler] oc调用js的registerHandler()方法 无数据,无回调 */ -(void)bridgeCallJsMethod{ [_bridge callHandler:@"testOCCallJS"]; } /* * 4,[_bridge callHandler: data:] oc调用js的registerHandler()方法 有数据,无回调 */ -(void)bridgeCallJsMethodWithData{ id data = @{@"OCcallingJS":@"Hi,this is from oc"}; [_bridge callHandler:@"testOCCallJS" data:data]; } /* * 5,[_bridge callHandler:data:responseCallback:] oc调用js的registerHandler()方法 有数据,有回调 */ -(void)bridgeCallJsMethodWithDataAndResponse{ id data = @{@"OCcallingJS":@"Hi,this is from oc"}; [_bridge callHandler:@"testOCCallJS" data:data responseCallback:^(id responseData) { //当js执行OC的回调时 NSLog(@"js->testOCCallJS response oc with data:%@",responseData); }]; }通过上面5个方法,客户端就可以任意调用网页中的方法,前提是网页中有该方法。
相关文章推荐
- Android使用SpannableString进行字符串的分段处理
- 零java基础搞定微信Server_5:启用微信公众号开发模式
- Cocos2dx引擎笔记——基础概念(场景,层,精灵,调度器)
- Android截图,兼容android 5.0和大图片
- Unity3D 图集分割
- mapper.xml内容解析
- [android developer学习笔记]Android mk
- 使用Swift去掉字符串中的空格
- android中对Bitmap图片设置任意角为圆角
- 树转化成树状数组POJ3321Apple Tree
- Android training–android studio
- Android training–android studio
- Android通过注解来初始化控件
- 小程序-----输出字符串中的中文字符
- 【转】Android Google Map API使用的八个步骤
- android webView与js交互
- android ListView 分析(一)
- 微信开发
- 【转】Android 国内集成使用谷歌地图
- 微信公共平台开发5 .net