iOS原生APP和H5交互-delegate和第三方
一、原生代码中直接加载页面(拦截)
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(WebViewJavascriptBridge第三方)
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;
四、 原生代码与网页交互通信(WebViewJavascriptBridge第三方)
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."];
五、UIWebView页面信息的离线缓存
推荐一个比较好的第三方库RNCachingURLProtocol ,只需要在AppDelegate中加入下面方法即可。
[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];
地址:https://github.com/rnapier/RNCachingURLProtocol
六、 总结
关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案,推荐:IT面试宝典(典型)。
版权声明:本文为博主原创文章,未经博主允许不得转载。
七、附加 JS端配置:(WebViewJavascriptBridge第三方)
<!doctype html> <html><head><meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"><style type='text/css'>html { font-family:Helvetica; color:#222; }h1 { color:steelblue; font-size:24px; margin-top:24px; }button { margin:0 3px 10px; font-size:12px; }.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }</style></head><body><h1>WebViewJavascriptBridge Demo</h1><script>window.onerror=function(err) {log('window.onerror:' +err)}/*这段代码固定的要放到js中*/function setupWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) { returncallback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { returnwindow.WVJBCallbacks.push(callback); }window.WVJBCallbacks=[callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display= 'none';WVJBIframe.src= 'wvjbscheme://__BRIDGE_LOADED__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) },0)}//与oc交互的所有方法都要放到这儿注册 setupWebViewJavascriptBridge(function(bridge) {var uniqueId = 1function log(message, data) {var log = document.getElementById('log')var el = document.createElement('div')el.className= 'logLine'el.innerHTML= uniqueId++ + '.' + message + ':<br/>' +JSON.stringify(data)if (log.children.length) { log.insertBefore(el, log.children[0]) }else{ log.appendChild(el) }}/*JS给ObjC提供公开的API,在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数,且可以回调ObjC*/bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {log('ObjC called testJavascriptHandler with', data)var responseData = { 'Javascript Says':'Right back atcha!'}log('JS responding with', responseData)responseCallback(responseData)})document.body.appendChild(document.createElement('br'))var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))callbackButton.innerHTML= 'Fire testObjcCallback'callbackButton.onclick=function(e) {e.preventDefault()log('JS calling handler "testObjcCallback"')/*JS给ObjC提供公开的API,ObjC端通过注册,就可以在JS端调用此API时,得到回调。ObjC端可以在处理完成后,反馈给JS,这样写就是在载入页面完成时就先调用*/bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {log('JS got response', response)})}})</script><div id='buttons'></div><div id='log'></div> </body></html>
github测试demo:https://github.com/n1sunjianfei/iOS-And-H5
参考文献:http://www.myexception.cn/operating-system/1977272.html
http://www.jianshu.com/p/4ed3e5ed99c6
推荐阅读:http://www.cnblogs.com/jiang-xiao-yan/p/5345755.html
转载于:https://www.cnblogs.com/sunjianfei/p/6086876.html
iOS原生APP和H5交互-delegate和第三方相关推荐
- iOS原生App与H5页面交互 离线缓存 笔记
//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法- (BOOL)webView:(UIWebView*)webView shouldStartLoadW ...
- Android原生app与H5交互
1.开发背景. 随着当前开发迭代要求速度更快,改动更灵活,不需要发布版本就能实时更新app的内容,故当前H5制作界面越来越受到科技公司和开发者的欢迎. 2.实现交互 今天记录一下开发过程中用到的H5交 ...
- 关于原生android与H5交互的方法
文章目录 原生android与H5交互 android调用H5方法 H5调用android 原生android与H5交互 前面讲解方法,结尾放代码 android调用H5方法 首先需要一个WebVie ...
- android 监听 h5 window,H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互...
下面从H5的角度记录交互思路: 1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境 2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在win ...
- 如何用html构建ios应用,使用HTML5构建iOS原生APP
转自http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webvi ...
- 如何用html构建ios应用,使用HTML5构建iOS原生APP(2)
有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为webview的跳转很生硬,而ajax+js模拟则不如原生segue平滑). 有时候我们 ...
- vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下. 1.通过url传输数据:(一般是在入口页面传下ap ...
- vue 获取安卓原生方法_vue与原生app的对接交互的方法(混合开发)
小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我把我踩的一些坑,拿出来给大家分享下.1.通过url传输数据:(一般是在入口页面传下app ...
- 安卓混合开发——原生Java和H5交互,保证你一看就懂!
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的JavaSc ...
- 一张图看懂原生app和H5的区别
程序 速度性能 用户体验 硬件流量 开发维护 运行速度 产品性能 动效使用 通知提醒 整体评价 底层设备 网络流量 用户留存 开发方式 版本更新 版本控制 图像渲染 维护成本 原生app 快.流畅 稳 ...
最新文章
- context.xml mysql_在tomcat下context.xml中配置各种数据库连接池(示例代码)
- 2021下半年软考各省准考证打印时间
- 信息系统项目管理师-项目合同管理考点笔记
- HTTP状态码对照表(全部状态_建议收藏)
- 可以在线测试血糖的软件,血糖也能自己测,糖护士荷智能血糖仪体验:测血糖就这么简单...
- “手机到底是如何实现定位的?工作原理是什么?”
- 在VMware中安装ArchLinux
- IP 分类地址、子网划分你还在混淆不清吗?别怕!今天全家桶来喽
- 腾讯T3大牛亲自讲解!学java是什么意思
- P4语言——basic_tunnel
- Linux 安装cacti
- 【Pygame小游戏】神还原【欢乐无穷的双人坦克大战】小程序游戏,上手开玩~(附完整源码)
- Inspection info: This inspection analyzes method control and data flow to report possible conditions
- JAVA开源工具大全
- nginx部署前端项目的详细步骤
- java中关系运算符_Java 关系运算符
- 基于Halcon的多相机拼图软件
- python判断字符串包含中文_高手接招! 小应用 用python3判断一个字符串是不是中文组成的...
- [CTO札记]‘信息/行为外播’--与开放SNS平台的互动
- 开课吧python小课学了有用吗-案例拆解:开课吧Python体验课
热门文章
- 工作一两年后 ,你会选择什么样的公司?
- 【实践】Pytorch nn.Transformer的mask理解
- Transformers Assemble(PART I)
- 【论文解读】UniLM:一种既能阅读又能自动生成的预训练模型
- 当代研究生应当掌握的并行训练方法(单机多卡)
- 帝都搬砖四年,我决定回老家考公务员
- 干货 | 一文掌握常用的机器学习模型
- 2019118_四个化学数据分析(4)
- leetcode—25.链表排序题目leetcode总结
- 深度学习2.0-21.Keras高层API-compilefitEvaluatePredict