UIWebView和Js交互
在日常的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交互的更多相关文章
- UIWebView 与 JS 交互(1):Objective-C 调用 Javascript
众所周知,随着硬件水平的发展,HTML5 与原生 APP 性能差距不断缩小,正在互联网科技领域扮演者越来越重要的角色.作为一种能很大程度上节约成本的技术方案,通过 HTML5 及 JS 实现的跨平台技 ...
- UIWebview于JS交互
最近使用火车票网的限行网页,但是广告以及头部nav和地步footer都是我们现在所不需要的,所以决定使用js交互,下面所有代码都写在 webViewDidFinishLoad 里面 1.查看原网址的源 ...
- iOS中UIWebView使用JS交互 - 机智的新手
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- UIWebview与js交互[转]
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- iOS中UIWebView使用JS交互
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- uiwebview和 js交互框架
WebViewJavascriptBridge
- UIWebView与JS的深度交互
我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img &g ...
- UIWebView与JS的深度交互-b
要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的 HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > ...
- iOS中使用UIWebView与JS进行交互
iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...
随机推荐
- golang gbk转utf8 mssql access
package ms2mysql import ( "bytes" "golang.org/x/text/encoding/simplifiedchinese" ...
- setValue和setObject的区别
在NSMutableDictionary的方法中有setValue forKey与setObject forKey,它们都可以用来设置某一个key值对应的value 1,setValue: forKe ...
- 使用spring配置quartz定时器
quartz是石英钟的意思,所以用这个名字来做定时器的框架名称再适合不过.一年前做项目的时候有用过这个框架,当时没有整理,今天刚好新的商城系统也需要定时器.想要达到的效果是:每天的固定时间,比如凌晨3 ...
- 初试Nodejs——使用keystonejs创建博客网站1(安装keystonejs)
我正在阿里云上创建一个简单的个人博客网站,刚好正在尝试NodeJs,决定找一款基于NodeJs的CMS来完成这个工作,最后找到了KeyStoneJS. KeyStoneJS是基于Express和Mon ...
- 期许伟大-基于CMMI的过程改进之道探索
原文作者:上海科维安信息技术顾问有限公司QAI China 何丹博士 CMMI主任评估师 一.引子 近年来,由美国SEI (软件工程研究所)开发的SW-CMM (软件过程能力成熟度模型 ...
- XE3随笔15:使用 IXMLHTTPRequest 简单获取网页源代码
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- RHEL7关于时间的学习笔记
当你发现时间是贼了,它早已偷光你的选择. 一,GMT.UTC.CST GMT:(Greenwich Mean Time)格林威治时间 ,太阳通过格林威治那一刻来作为计时标准. UTC:(Coordin ...
- 基于御安全APK加固的游戏反外挂方案
一. 前言 随着移动互联网的兴起,移动游戏市场近几年突然爆发,收入规模快速增长.根据第三方数据统计,国内移动游戏2015年市场规模已达514.6亿.由于手游市场强势兴起,而且后续增长势头会愈加猛烈.火 ...
- winfrom 捕获是否点击关闭按钮关闭的窗体
const int WM_SYSCOMMAND = 0x0112; const int SC_CLOSE = 0xF060; protected override void WndProc(ref M ...
- 【转】 71道经典Android面试题和答案,重要知识点都包含了
,,面试题1. 下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存 B.内存回收程序负责释放无用内存 C.内存回收程序允许程序员直接释放内存 ...