iOS中偶尔也会用到webview来显示一些内容，比如新闻，或者一段介绍。但是用的不多，现在来教大家怎么使用js跟webview进行交互。

这里就拿点击图片获取图片路径为例：

1.测试页面html

<!doctype html>

<html>

  <head>

  </head>

  <body>

    <div>

      <img src="test.png"/>

    </div>

  </body>

</html>

2.然后我们在controller中加载这一段html

[_webview loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle]URLForResource:@"work" withExtension:@"html"]]];

3.可以看到，这里只显示一张图片

4.加载相关js文件,命名为test.js

function setImageClickFunction(){

  var imgs = document.getElementsByTagName("img");

  for (var i=0;i<imgs.length;i++){

    var src = imgs[i].src;

    imgs[i].setAttribute("onClick","click(src)");

  }

  document.location = imageurls;

}

function click(imagesrc){

  var url="ClickImage:"+imagesrc;

  document.location = url;

}

这里说下两个方法的意思（对那些不熟悉js的有帮助）：第一个是给你的webview里所有图片加上点击事件，第二个方法为点击后返回图片的URL，关于接收这个URL下面说。

5.在controller中加载这一段js代码

[_webview stringByEvaluatingJavaScriptFromString:[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"test" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]];

你还可以直接把js代码放到html中，效果是一样的。

6.在webview的代理方法中，我们用去调用第一个js方法

-(void)webViewDidFinishLoad:(UIWebView *)webView

{

     [_webview stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"];

}

，这里也就是说在webview加载完后给他绑定上点击事件。好了，最后就是接收URL了

7.接收js返回值,当点击图片的时候会实现这个代理方法（每次加载webview都会显示），然后我们输出他的返回值看看

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

{

  NSString *path=[[request URL] absoluteString];

  NSLog(@"%@",path);

  return YES;

}
2014-10-03 19:39:37.099 webview[31153:60b] ClickImage:file:///Users/zhiwupei/Library/Application%20Support/iPhone%20Simulator/7.1-64/Applications/C4F814F6-088D-444F-A508-40AB5C775567/webview.app/test.png

可以看到控制台打印了图片路径出来。因为这里用的是本地图片，网络图片也是同样的道理。这样就可以实现点击图片获取到他的路径了。

 
 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
 
 
 
在IOS中原生控件很 多.能自定义的控件也很多.但在视图界面的开发上如果用原生的控件去做就显得非常麻烦了.在我已知的技术中拥有最便捷和效果最好的视图技术展示技术中.最 优秀的就要属网页.假如用到HTML来展示视图界面的话.我们就需要一个承载的容器.这个容器IOS已经帮我们提供好了,那就是我们今天的主角 UIWebView控件.
准备工作:
一个完整的html页面.
一.将html网页加载进入UIWebView容器中
在"-(void)viewDidLoad”方法中加入如下代码
NSString *webPath = [[NSBundlemainBundle]pathForResource:@“HelloWord"ofType:@"html”];//获取文件路径
NSURL *webURL = [NSURLfileURLWithPath:webPath];//通过文件路径字符串设置URL
NSURLRequest *URLRequest = [NSURLRequestrequestWithURL:webURL];//设置请求提交的相关URL
[self.webViewloadRequest:URLRequest];//提交请求
二.加入UIWebViewDelegate委托(如果想要进行相应的数据交互必须添加相应的我委托)
1.-(BOOL)webView:(UIWebView
*)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType//html页面的js动作触发时运行
2.-(void)webViewDidFinishLoad:(UIWebView
*)webView //html加载完后触发
三.OC提交JS请求.运行JS方法
[self.webViewstringByEvaluatingJavaScriptFromString:@”方法名(%@)",参数]];
四.JS提交请求到OC
在-(BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType中添加如下代码:

NSString *requestString = [[requestURL]absoluteString];//获取请求的绝对路径.

NSArray *components = [requestStringcomponentsSeparatedByString:@":”];//提交请求时候分割参数的分隔符

if ([componentscount]
>1 && [(NSString
*)[components objectAtIndex:0]isEqualToString:@"testapp"])
{

//过滤请求是否是我们需要的.不需要的请求不进入条件

if([(NSString
*)[components objectAtIndex:1]isEqualToString:@"change"])

{

//所要执行的操作

}

returnNO;

}

returnYES;

五.HTML中JS的写法.
1.接收请求的方法写法
functionfund(){
//操作
}
2.提交请求的方法写法
function sendCommand(cmd,param){

var url="testapp:"+cmd+":"+param;//组合请求字符串

document.location = url;//提交的请求

}

最后附上例子程序(传送阵):

http://download.csdn.net/detail/fqcl992/6929375

 
 
 
 
 

iOS中UIWebView使用JS交互的更多相关文章

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

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

  2. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  3. iOS中web与Js的交互

    问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...

  4. UIWebView 与 JS 交互（1）：Objective-C 调用 Javascript

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

  5. UIWebview与js交互[转]

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

  6. iOS下原生与JS交互(总结)

    iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一 第一种方式是用JS ...

  7. UIWebview于JS交互

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

  8. iOS中UIWebView与其中网页的javascript的交互

    首发:个人博客,更新&纠错&回复 1.本地语言调js的方式与android中的方式类似,也是向WebView控件发送要调用的js语句 2. 但js调本地语言,则不是像android那样 ...

  9. UIWebView和Js交互

    在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能.但是也有一些项目中需要web页面中的html和native进行交互.但是ios sdk 并 ...

随机推荐

  1. three supported reliability levels: * End-to-end * Store on failure * Best effort

    https://github.com/cloudera/flume/blob/master/flume-docs/src/docs/UserGuide/Introduction === Reliabi ...

  2. cocos2d-js v3新特性

    1.游戏对象 使用cc.game单例代替了原有的cc.Application以及cc.AppControl 2.属性风格API 旧的API                                ...

  3. 把tomcat写到Windows系统服务器的服务中

    首先准备一个免安装的tomcat服务器,和一个Windows系统. 在“C:\Windows\SysWOW64”中找到cmd.exe的执行文件,以管理员身份启动: 进入到tomcat的bin文件夹, ...

  4. UIView封装动画--iOS利用系统提供方法来做转场动画

    UIView封装动画--iOS利用系统提供方法来做转场动画 UIViewAnimationOptions option; if (isNext) { option=UIViewAnimationOpt ...

  5. APP上线审核注意事项

    基本要点 ·         不能导致手机故障(比如崩溃或屏幕问题) ·         长时间/过度使用之后反应仍然很快 ·         应用内的所有价格信息中不能用固定值代替可变变量 ·    ...

  6. Java 8新特性之旅：使用Stream API处理集合

    在这篇“Java 8新特性教程”系列文章中,我们会深入解释,并通过代码来展示,如何通过流来遍历集合,如何从集合和数组来创建流,以及怎么聚合流的值. 在之前的文章“遍历.过滤.处理集合及使用Lambda ...

  7. Java NIO（一） 初步理解NIO

    Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. 为什么要使用 NIO? NIO ...

  8. 存储过程系列三：根据表别名方式distinct去重插入

    1.根据表别名方式distinct去重插入 insert into GG_XKZ_YLQXSCXKESL_SCDZ           ( bzj, xkzid,  sqid, jtdz, szsf, ...

  9. PGTM通用性能测试模型

    PTGM通用性能测试模型 一.      测试前期准备阶段 目标: 1. 保证系统稳定性: 2. 建立合适的测试团队. 活动: 1.    系统基础功能验证 类似于BVT测试,确保被测系统已具备进行性 ...

  10. collectd+logstash+influxdb+grafana构建windows服务器应用监控系统

    一.背景介绍 本监控方案支持对Windows Server服务器集群的全面监控,方案提供丰富的图表展示, 以及对异常问题进行邮件的实时报警. 本系统由Collectd(操作系统数据搜集).logsta ...