iOS中UIWebView使用JS交互

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

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

1.测试页面html

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

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

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

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


iOS中UIWebView使用JS交互_第1张图片

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

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

[_webviewstringByEvaluatingJavaScriptFromString:[NSStringstringWithContentsOfURL:[[NSBundle mainBundle]URLForResource:@"test"withExtension:@"js"]encoding:NSUTF8StringEncodingerror:nil]];

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

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

-(void)webViewDidFinishLoad:(UIWebView *)webView{    [_webviewstringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"];}

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

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

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSString*path=[[request URL] absoluteString];NSLog(@"%@",path);returnYES;}

099webview[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中UIWebView使用JS交互)