在日常的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. golang gbk转utf8 mssql access

    package ms2mysql import ( "bytes" "golang.org/x/text/encoding/simplifiedchinese" ...

  2. setValue和setObject的区别

    在NSMutableDictionary的方法中有setValue forKey与setObject forKey,它们都可以用来设置某一个key值对应的value 1,setValue: forKe ...

  3. 使用spring配置quartz定时器

    quartz是石英钟的意思,所以用这个名字来做定时器的框架名称再适合不过.一年前做项目的时候有用过这个框架,当时没有整理,今天刚好新的商城系统也需要定时器.想要达到的效果是:每天的固定时间,比如凌晨3 ...

  4. 初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs)

    我正在阿里云上创建一个简单的个人博客网站,刚好正在尝试NodeJs,决定找一款基于NodeJs的CMS来完成这个工作,最后找到了KeyStoneJS. KeyStoneJS是基于Express和Mon ...

  5. 期许伟大-基于CMMI的过程改进之道探索

    原文作者:上海科维安信息技术顾问有限公司QAI China 何丹博士 CMMI主任评估师   一.引子     近年来,由美国SEI  (软件工程研究所)开发的SW-CMM  (软件过程能力成熟度模型 ...

  6. XE3随笔15:使用 IXMLHTTPRequest 简单获取网页源代码

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  7. RHEL7关于时间的学习笔记

    当你发现时间是贼了,它早已偷光你的选择. 一,GMT.UTC.CST GMT:(Greenwich Mean Time)格林威治时间 ,太阳通过格林威治那一刻来作为计时标准. UTC:(Coordin ...

  8. 基于御安全APK加固的游戏反外挂方案

    一. 前言 随着移动互联网的兴起,移动游戏市场近几年突然爆发,收入规模快速增长.根据第三方数据统计,国内移动游戏2015年市场规模已达514.6亿.由于手游市场强势兴起,而且后续增长势头会愈加猛烈.火 ...

  9. winfrom 捕获是否点击关闭按钮关闭的窗体

    const int WM_SYSCOMMAND = 0x0112; const int SC_CLOSE = 0xF060; protected override void WndProc(ref M ...

  10. 【转】 71道经典Android面试题和答案,重要知识点都包含了

    ,,面试题1.        下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存  B.内存回收程序负责释放无用内存   C.内存回收程序允许程序员直接释放内存 ...