iOS中UIWebView使用JS交互

mac2022-06-30  24

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

         

转载于:https://www.cnblogs.com/Cheetah-yang/p/4678936.html

相关资源:JAVA上百实例源码以及开源项目
最新回复(0)