iOS中UIWebView使用JS交互
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
可以看到控制台打印了图片路径出来。因为这里用的是本地图片，网络图片也是同样的道理。这样就可以实现点击图片获取到他的路径了。
准备工作:
一个完整的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交互的更多相关文章
- iOS中UIWebView使用JS交互 - 机智的新手
iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...
- iOS中UIWebView执行JS代码(UIWebView)
iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...
- iOS中web与Js的交互
问题 感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成 基本结构:原生壳 + we ...
- UIWebView 与 JS 交互（1）：Objective-C 调用 Javascript
众所周知,随着硬件水平的发展,HTML5 与原生 APP 性能差距不断缩小,正在互联网科技领域扮演者越来越重要的角色.作为一种能很大程度上节约成本的技术方案,通过 HTML5 及 JS 实现的跨平台技 ...
- UIWebview与js交互[转]
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- iOS下原生与JS交互(总结)
iOS开发免不了要与UIWebView打交道,然后就要涉及到JS与原生OC交互,今天总结一下JS与原生OC交互的两种方式. JS调用原生OC篇(我自己用的方式二,简单方便) 方式一 第一种方式是用JS ...
- UIWebview于JS交互
最近使用火车票网的限行网页,但是广告以及头部nav和地步footer都是我们现在所不需要的,所以决定使用js交互,下面所有代码都写在 webViewDidFinishLoad 里面 1.查看原网址的源 ...
- iOS中UIWebView与其中网页的javascript的交互
首发:个人博客,更新&纠错&回复 1.本地语言调js的方式与android中的方式类似,也是向WebView控件发送要调用的js语句 2. 但js调本地语言,则不是像android那样 ...
- UIWebView和Js交互
在日常的ios项目开发中,我们经常会在原生应用中嵌入web页面,通常我们只是进行一个展示,没有其它的一些功能.但是也有一些项目中需要web页面中的html和native进行交互.但是ios sdk 并 ...
随机推荐
- EasyDarwin云存储方案调研：海康萤石云采用的是MPEG-PS打包的方式进行的存储
EasyDarwin开源流媒体服务器项目在直播功能稳定和完善之后,开始涉及服务器端存储与回放功能的调研与开发,当然,这里就要研究一下行业标杆萤石云是怎么来做的,我们通过非常复杂的流程将萤石存储的录像文 ...
- linux杂谈（十四）:ftp的企业应用级的配置（一）
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_player_c/article/details/24869877 1.ftp简单介绍 ( ...
- asp概述
asp的理解 今天才知道,Asp原来不是一种语言,也不是一种开发工具,而是一种技术框架, 主要功能是把脚本语言,HTML,组件和Web数据库访问功能有机的结合在一起, 形成一个能在服务器端运行的应用程 ...
- pyinstaller-py2exe-cx_Freeze打包第一个wxPython程序HelloWorld
pyinstaller 打包hello 7Mb ================= www.pyinstaller.org pip install pypiwin32 pip install pyin ...
- TMS320C6478+MCP2515
调一个驱动,将看过的资料记录下来. 这个驱动写得比较直观:http://www.51hei.com/bbs/dpj-114085-1.html
- 代码空间项目 -- InstantiationException的异常
java.lang.InstantiationException实例化异常.当试图通过newInstance()方法创建某个类的实例,而该类是一个抽象类或接口时,抛出该异常. 这次项目中查询type时 ...
- Centos查看端口占用情况
Centos查看端口占用情况命令,比如查看80端口占用情况使用如下命令: lsof -i tcp:80 列出所有端口 netstat -ntlp 结束进程: kill 进程代码
- HDU4686 Arc of Dream —— 矩阵快速幂
题目链接:https://vjudge.net/problem/HDU-4686 Arc of Dream Time Limit: 2000/2000 MS (Java/Others) Memo ...
- centos 配置
安装 node 源地址: http://my.oschina.net/blogshi/blog/260953 (一) 编译好的文件 简单说就是解压后,在bin文件夹中已经存在node以及npm,如果你 ...
- android vector pathData探究,几分钟绘制自己的vectordrawable
之前经常看到一些酷酷的图标效果, 深入进去发现不是直接用的图片, 而是一些以Vector标签开头的xml文件, 于是就看到了如下代码: <vector xmlns:android="h ...