在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能。但是也有一些项目中需要web页面中的html和native进行交互。但是ios sdk 并没有相应的方法来让我们做到js代码来和原生进行交互。但是webview在加载前会调用其一个delegate方法,通过监听

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

代理方法,我们可以通过url的变化来判断用户目前的一些点击行为。如下:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
if ([[request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]hasSuffix:@"login_app"]) {
//用户点击了登录按钮
[self doLogin];
return YES;
}else if([[request.URL.absoluteString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]hasSuffix:@"register_app"]){
//用户点击了注册按钮
[self doRegister];
return YES;
}
}

我们可以看到,针对不同的url,我们可以判断对应的用户行为,但是前提是用户的不同行为给webView带来不同的响应url,这样我们才可以判断用户的行为。

同时在我们的项目开发过程中,其实我们有的时候也希望去操控webview中显示的页面。针对这一点,ios sdk 提供了相应的方法,

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
比如我们想获取页面中的id为icon_app的某个属性。我们可以如下操作

NSString *downLoadPath = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('icon_app').getAttribute('data_url')"];

在编写这种代码的前提是我们对于js比较熟悉,能给书写一些简单的js代码,当然我们也可以向相应同事提供帮助。另外其实我们也可以调用webView中js方法,前提是我们的前端同事把对应的js方法写好,然后在我们在native中采用stringByEvaluatingJavaScriptFromString 来调用对应的方法。如下:

[myWebView stringByEvaluatingJavaScriptFromString:@"showPlay()"];

直接调用相应的方法名字。

如今很多网页都是采用html5来编写,随着phoneGap的推出,在移动开发中也有一些应用采用html5来开发,开源项目Cordova的推出,让我们可以在移动web页面中直接调用我们native的方法。

集成如下(采用cocoapods环境下):

1.在podfile中添加Cordova的应用,如下

vim Podfile
在Podfile中添加如下代码

pod 'Cordova', '3.4.0'
保存后,执行如下代码

pod update

然后我们从Cordova开源项目中将config.xml文件拷贝到项目中。并配置该文件,由于在web端是通过

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
来调用native方法,所以在我们本地是需要建立一个 service Class,按照Cordova官方文档的说法这个类需要继承于CDVPlugin类,需要引用Cordova中某个类,我们只需要添加如下引用头文件

#import "CDV.h"
新建类如下:

#import "CDV.h"

@protocol HJMVPluginDelegate;
@interface HJMVPlugin : CDVPlugin

+ (instancetype)sharedPlugin;
- (void)addDelegate:(id)deleget;
- (void)discussHtmlReplyWith:(CDVInvokedUrlCommand*)command;//详情页面中的回复方法
- (void)gotoDiscussDetailWith:(CDVInvokedUrlCommand*)command;//列表页面中跳转详情页面;

@end

@protocol HJMVPluginDelegate <NSObject>
@optional
- (void)discussHtmlShouldReplyWithArguments:(NSArray*)arguments;
- (void)shouldGotoDiscussDetailWithArguments:(NSArray*)arguments;
@end

这个类里面定义的两个方法就是我们exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);方法中的<action>。command是由webview这边传过来的一些参数,在native方法中都是可以取出来加以运用。

那我们现在可以来配config.xml文件了,在config中插入如下代码:

<feature name="HJMVPlugin">
<param name="ios-package" value="CDVLocalStorage"/>
</feature>

feature的name属性应该为我们定义的service class 的classname,param对应的name属性为ios-package不可以改变的。
这样web页面就可以调用我们原声应用的相应的方法,我们来看看被调用的原生应用的方法中做了哪些处理:

- (void)discussHtmlReplyWith:(CDVInvokedUrlCommand*)command{
//http://cordova.apache.org/docs/en/3.4.0/guide_platforms_ios_plugin.md.html#iOS%20Plugins
[self.delegates enumerateObjectsUsingBlock:^(id<HJMVPluginDelegate> delegate, BOOL *stop) {
if([delegate respondsToSelector:@selector(discussHtmlShouldReplyWithArguments:)]){
[delegate discussHtmlShouldReplyWithArguments:command.arguments];
}
}];
}
在被调用的方法中我们可以通过command.arguments来取出web页面给我们传过来的数组,其对应exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);中的[<args>],参数的顺序需要web端和native协调tongyi好。

一下是注意点:

1.在使用cordova的时候是不可以调用UIWebView,而是需要继承cordova的CDVViewController,在CDVViewController中是内嵌了一个webview,是有这个webview来加载我们的web页面,在这里我们只需给CDVViewController设置startPage属性就好。

2.目前这方面的开源项目还不是太多,所以需要多次尝试,在这个过程中遇到一些问题也是必然,所以也别沮丧,当然我们也可以参考官方网站上的文档https://cordova.apache.org/。

以上这些方法都是可以实现的,都是基于我项目中的一些情况来写的这篇文章。

杭州ios交流群 372471379

UIWebView和Js交互的更多相关文章

  1. UIWebView 与 JS 交互(1):Objective-C 调用 Javascript

    众所周知,随着硬件水平的发展,HTML5 与原生 APP 性能差距不断缩小,正在互联网科技领域扮演者越来越重要的角色.作为一种能很大程度上节约成本的技术方案,通过 HTML5 及 JS 实现的跨平台技 ...

  2. UIWebview于JS交互

    最近使用火车票网的限行网页,但是广告以及头部nav和地步footer都是我们现在所不需要的,所以决定使用js交互,下面所有代码都写在 webViewDidFinishLoad 里面 1.查看原网址的源 ...

  3. iOS中UIWebView使用JS交互 - 机智的新手

    iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...

  4. UIWebview与js交互[转]

    UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...

  5. iOS中UIWebView使用JS交互

    iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...

  6. uiwebview和 js交互框架

    WebViewJavascriptBridge

  7. UIWebView与JS的深度交互

    我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...

  8. UIWebView与JS的深度交互-b

    要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > ...

  9. iOS中使用UIWebView与JS进行交互

    iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...

随机推荐

  1. BestCoder Round #90 //div all 大混战 一题滚粗 阶梯博弈,树状数组,高斯消元

    BestCoder Round #90 本次至少暴露出三个知识点爆炸.... A. zz题 按题意copy  Init函数 然后统计就ok B. 博弈 题  不懂  推了半天的SG.....  结果这 ...

  2. FMDB中 databaseWithPath 的使用问题

    阅读fmdb的源码文件(下载地址http://github.com/ccgus/fmdb)会发现下面一段注释,里面提到的创建数据库的方法也在很多博客中被引用,但是跑代码的时候发现,文件并不会像文档中所 ...

  3. Spring SpringMVC和Mybatis整合

    1.引入所要的jar包 2.创建Mybatis的sqlMapConfig.xml配置文件,该文件中可以配置mybaits的相关参数,数据源不在这里配置. <?xml version=" ...

  4. pynotify

    import pynotify,sys if not pynotify.init('a'): sys.exit(1) n=pynotify.Notification('title','info','f ...

  5. MJPhotoBrowser BUG修复

    崩溃在loading.progress = (float)receivedSize/expectedSize; 分析:MJPhotoView 执行了hide移除了MJPhotoLoadingView, ...

  6. Linux 内核通知链随笔【中】

    关于内核通知链不像Netlink那样,既可以用于内核与用户空间的通信,还能用于内核不同子系统之间的通信,通知链只能用于内核不同子系统之间的通信.那么内核通知链到底是怎么工作的?我们如何才能用好通知链? ...

  7. 手把手写php框架中三大“自动功能”

    在很多php框架中都有自动过滤,自动填充,自动验证等三大自动功能,用来对POST表单传过来的数据进行加工,以便能够更加规范的导入数据库.这一功能在添加商品,添加商品分类中有很大的用处.比如thinkp ...

  8. odoo10 费用报销

    odo10 对费用报销进行了改进,恢复了 8.0 及之前版本具有的 单个报销包含多个 明细内容的功能. 使用步骤大致如下: 根据管理需要设立 相应的科目和分析帐户 科目 分析帐户 建立费用目录 员工录 ...

  9. [Docker]Docker快速上手学习笔记

    0. 学习的一些疑问 如何热更新镜像(images)?(你可以快速启动或者销毁容器.这种时间几乎是实时的) 如何热更新游戏服? 好处在于各个应用之间环境相互独立,即使某一个容器崩溃也不会影响到其它容器 ...

  10. 【转载】PHP 开发者该知道的 5 个 Composer 小技巧

    Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方 ...