iOS原生APP与H5+JS交互
来源:互联网 发布:淘宝订单信息收购 编辑:程序博客网 时间:2024/04/29 07:15
、 原生代码中直接加载页面
1. 具体案例
加载本地/网络HTML5作为功能介绍页
2. 代码示例
//本地
-(void)loadLocalPage:(UIWebView*)webView{ NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"];NSString* appHtml =[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncodingerror:nil];NSURL *baseURL = [NSURLfileURLWithPath:htmlPath]; [webView loadHTMLString:appHtmlbaseURL:baseURL];}
//网络
-(void)loadWebPage:(UIWebView *)webView{ NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"]; NSURLRequest *request = [NSURLRequestrequestWithURL:url]; [webView loadRequest:request];}
3. 额外操作
a iOS中承载网页的容器是UIWebView,可以借助它的代理来监听网页加载情况;
b 在加载过程中,我们还可以获取该网页中的meta值,例如代码:
NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];
就是从meta中得到shareUrl对应的value值;
c 截获当前是发起的那种请求,以便native来做对应的控制,例如代码:
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType{ NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; if ([requestString hasPrefix:@"http://customersharetrigger"]){ //执行一些操作 return NO; } return YES;} //可以监听到这个请求,从而达到控制作用;
二、 原生代码操作页面元素
1. 具体案例
在嵌入H5后需要操作页面元素
2. 代码示例
a、获取当前页面的url。
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];}
b、获取页面title:
NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"]; NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];
c、修改界面元素的值。
NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];
d、表单提交:
NSString *js_result2 =[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];
3. 代码说明
stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中,通过这个方法就可以让iOS与UIWebView中的网页元素交互,例如上面的代码片段,它
功能非常的强大,用起来也相对简单,通过它我们可以很方便的操作页面元素,而且能直接插入一段JS方法,然后调用该方法执行;
三、 原生代码处理本地H5+JS
1. 具体案例
需要动态显示曲线图,如果直接加载绘制图形特别慢,所以采用本地放置模板,传入参数,然后模板自动绘制,提高体验,加快绘制;
2. 示例代码
-(void)loadWebPage:(UIWebView *)webView{ NSURL *localPathURL = [[NSBundlemainBundle] URLForResource:@"detail" withExtension:@"html"subdirectory:@"htmlResources"]; NSString *localPathUrl = [localPathURLabsoluteString]; NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time]; NSURL *requestURL = [NSURLURLWithString:localParamPathUrl]; [webView loadRequest:[NSURLRequestrequestWithURL:requestURL]]; }
3. 代码说明
a 这里需要采用绝对路径拖入H5模板,就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码,不然加载不成功,这个最初找了很多原因,最后才发现是拖入时候选择问题;
b 如果要加入参数,注意需要先转成string,然后再转为URL;
四、 原生代码与网页交互通信
1. 具体案例
原生代码与H5相互调用方法,并传递参数,而且能回调数据;
2. 借助第三方实现
WebViewJavascriptBridge,该开源库非常完美的解决了原生代码与H5交互,即互殴;
3. 代码示例
1.初始化一个webview(viewdidload)
UIWebView* webView =[[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:webView];
2.将此webview与WebViewJavascriptBridge关联(viewdidload)
if (_bridge) { return; } [WebViewJavascriptBridge enableLogging]; _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) { NSLog(@"ObjC received message from JS:%@", data); responseCallback(@"Response formessage from ObjC"); }];
此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。
(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)
[_bridgeregisterHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) { NSLog(@"testObjcCallback called:%@", data); responseCallback(@"Response fromtestObjcCallback"); }];
这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。
(2)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )
id data = @{@"greetingFromObjC": @"Hi there, JS!" }; [_bridgecallHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) { NSLog(@"testJavascriptHandlerresponded: %@", response); }];
注意这里的 testJavascriptHandler也是个方法标示。
(3)oc给js传值(通过 response接受返回值 )
[_bridge send:@"Astring sent from ObjC to JS" responseCallback:^(id response) { NSLog(@"sendMessage got response:%@", response); }];
(4)oc给js传值(无返回值)
[_bridge send:@"A string sent from ObjC after Webview hasloaded."];
五、 总结
关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案,推荐:IT面试宝典(典型)
- iOS原生APP与H5+JS交互
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互 离线缓存 笔记
- iOS原生App与H5页面交互笔记
- iOS原生App与H5页面交互 离线缓存 笔记
- H5与iOS原生交互
- 原生APP与js交互
- H5与android原生的JS交互
- iOS原生与H5页面交互
- iOS原生与H5交互开发
- iOS原生与H5双向交互总结
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- H5根原生app交互
- iOS微信分享&h5和原生app交互
- WebAPP(H5)与原生APP的交互设计区别
- WebAPP(H5)与原生APP的交互设计区别
- 9张思维导图学习Javascript
- JAVA自动装箱和自动拆箱
- java web 监听器详解
- OSI七层参考模型
- setAttribute设置class,style,事件时的浏览器兼容性
- iOS原生APP与H5+JS交互
- 网络基础知识笔记
- SystemUI下的RecentActivity
- Yii2.0常量配置 学习
- 金庸武侠十大外功排行
- 深入理解 Java 垃圾回收机制
- css hack 大全详解
- 自定义事件
- 最全的vim快捷键