UIWebView与JS简单交互(删除标签和获取某个标签的内容)

2017-01-14 15:50:14来源:http://www.jianshu.com/p/e584eaccb3a6作者:藍眼淚人点击

第七城市

一直以来都对获取网页中的某个标签的内容感兴趣,很好奇怎么实现获取到网页中某个标签,今天自己开始研究一下,如何去获取到一个标签中的内容。
在iOS中在8.0之前都是用UIWebView来加载网页内容,这里也就介绍UIWebView。
要实现与JS交互,就需要利用UIWebView的一个对象方法来实现


- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

这个方法需要等到UIWebView加载完毕之后去调用


在这里我找的是大众点评网的一个链接


1.首先在页面添加一个UIWebView


- (void)viewDidLoad {
[super viewDidLoad];
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.height - 20)];
NSString *str = @"http://m.dianping.com/tuan/deal/8157270";
[self.view addSubview:webView];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:str]]];
}

运行结果显示:



1.png


Paste_Image.png

在上面的两张图片中,看到顶部有一个导航栏,屏幕最底下还有一个一块区域总是遮挡了一些内容,当WebView滑到最底下的时候,还有一个尾部,首先来去掉这三个部分。
在写代码之前,先看下这三块的JS代码,在这里,我使用的是火狐去查看元素。


利用浏览器查看导航栏代码



Paste_Image.png


JS代码



Paste_Image.png

App下单区域



Paste_Image.png


JS代码



Paste_Image.png

底部



Paste_Image.png


JS代码



Paste_Image.png

由于这三个的唯一性,可以利用标签类型来得到这三个标签并且删除。
下面开始删除这三块区域


2.设置UIWebView的代理


webView.delegate = self;

3.实现WebView加载完毕的代理方法


#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 1.获取页面标题
NSString *string = @"document.title";
[webView stringByEvaluatingJavaScriptFromString:string];
// 2.去掉页面标题
NSMutableString *str = [NSMutableString string];
// 3.根据标签类型获取指定标签的元素
[str appendString:@"var header = document.getElementsByTagName(/"header/")[0];"];
[str appendString:@"header.parentNode.removeChild(header);"]; // 移除头部的导航栏
// 4.去掉footer一栏
[str appendString:@"var footer = document.getElementsByClassName(/"footer/")[0];"];
[str appendString:@"footer.parentNode.removeChild(footer);"];
// 5.去掉最底下的一块区域
[str appendString:@"var btn = document.getElementsByClassName(/"footer-btn-fix/")[0];"];
[str appendString:@"btn.parentNode.removeChild(btn);"];
[webView stringByEvaluatingJavaScriptFromString:str];
}

运行之后效果为



Paste_Image.png


Paste_Image.png

到此这三块区域都已经删除成功,接下来,获取里面某个标签的内容,我这里获取的是该店铺的地址



Paste_Image.png

继续在WebView加载完毕代理方法中添加代码


    // 6.获取店铺地址
NSMutableString *address = [NSMutableString string];
// 6.1首先获取到该标签元素
[address appendString:@"var address = document.getElementsByClassName(/"blo/")[0];"];
// 6.2获取到该标签元素的文本内容
[address appendString:@"address.textContent"];
// 6.3输出内容
NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:address]);

最终控制台输出的结果为



Paste_Image.png

由于之前没怎么接触过JS,所以在获取某个标签的内容的时候,反复找资料,最后在 http://www.w3school.com.cn/index.html 这个网站找到了textContent这个属性,得到了想要的结果。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台