UIWebView(Javascript)Html标签操作

在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 = @"xxxx";
[self.view addSubview:webView];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:str]]];
}

JS代码



JS代码



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];
}

JS代码



继续在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]);

最终控制台输出的结果为



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

文／藍眼淚（简书作者）

原文链接：http://www.jianshu.com/p/e584eaccb3a6

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。