在日常的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. geoserver使用curl发布 imagemosaic

    1.//create workspace     curl -v -u admin:geoserver -XPOST -H "Content-type: text/xml" -d ...

  2. 第四章 springboot + swagger(转载)

    此篇博客转发自:http://www.cnblogs.com/java-zhao/p/5348113.html swagger用于定义API文档. 好处: 前后端分离开发 API文档非常明确 测试的时 ...

  3. windows 下ssh 客户端

    今天用 xshell 和 bitvise ssh 在 windows 登录SSH ,发现 vi 一些中文内容的文件会出现乱码,配置无效,在网上找到一款不会中文乱码的SSH客户端 MobaXterm , ...

  4. PHP正则表达式 /i, /is, /s, /isU等

    PHP正则表达式 /i, /is, /s, /isU等 都是些什么东西呢? i 匹配大小写 s 模式中的圆点元字符(.)匹配所有的字符,包括换行符 x 模式中的空白字符除了被转义的或在字符类中的以外完 ...

  5. Spring RestTemplate: 比httpClient更优雅的Restful URL访问, java HttpPost with header

    { "Author": "tomcat and jerry", "url":"http://www.cnblogs.com/tom ...

  6. ms sql server 在cmd中执行sqlcmd的时候报错

    cmd下直接输入sqlcmd会提示 错误: HResult 0x2,级别 16,状态 1命名管道提供程序: 无法打开与 SQL Server 的连接 [2].Sqlcmd: 错误: Microsoft ...

  7. 保护眼睛,把常用软件的背景设置成Dark

    每天长时间使用电脑,很多软件的背景都是白色,久看对眼睛不好. 1)Google Chrome,WebDev/看新闻/看邮件/写博客.使用Stylish插件和Global Dark Style,效果相当 ...

  8. 了解Hadoop和大数据

    1. 场景: 现在人产生数据越来越快,机器则更快,所以需要另外的一种处理数据的方法.   硬盘容量增加,但是性能没跟上,解决办法是将数据分到多块硬盘,然后同时读取. 问题:     硬件问题 -- 复 ...

  9. android 应用笔记

    android 应用笔记 android 应用笔记 小书匠 Android 综合教程 Android常用技巧 安卓系统架构 安卓源码开发 安卓驱动 Linux内核 安卓应用开发 Java 教程 tic ...

  10. AngularJS 页面基本操作

    一.避免预先加载angular模板语法 <style> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, ...