WebView介绍
知识点:
- 代码创建一个UIWebView
- OC调用html的js
- js页面调用OC
相关代码实现
代码创建一个UIWebView
// 1.webView UIWebView *webView = [[UIWebView alloc] init]; webView.frame = self.view.bounds; webView.delegate = self; // 伸缩页面至填充整个webView webView.scalesPageToFit = YES; // 隐藏scrollView webView.scrollView.hidden = YES; [self.view addSubview:webView]; // 2.加载网页 NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"]]; [webView loadRequest:request];
OC调用html的js
关键代码：
// 删除底部的链接的JS [js1 appendString:@"var footer = document.getElementsByTagName('footer')[0];"]; [js1 appendString:@"footer.parentNode.removeChild(footer);"]; // OC中调用js [webView stringByEvaluatingJavaScriptFromString:js1];
完整示例
创建一个webView，实现UIWebViewDelegate代理，在页面加载完毕后，通过js删除相关的html代码。
#import "HMViewController.h" @interface HMViewController () <UIWebViewDelegate> @property (nonatomic, weak) UIActivityIndicatorView *loadingView; @end @implementation HMViewController /** test.html存在于服务器，里面的html和js代码，我们是无法修改的 如果test.html显示在手机端，把那个ul去掉 */ - (void)viewDidLoad { [super viewDidLoad]; // 1.webView UIWebView *webView = [[UIWebView alloc] init]; webView.frame = self.view.bounds; webView.delegate = self; // 伸缩页面至填充整个webView webView.scalesPageToFit = YES; // 隐藏scrollView webView.scrollView.hidden = YES; [self.view addSubview:webView]; // 2.加载网页 NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"]]; [webView loadRequest:request]; // 3.创建一个加载蒙板 UIActivityIndicatorView *loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]; [loadingView startAnimating]; loadingView.center = CGPointMake(160, 240); [self.view addSubview:loadingView]; self.loadingView = loadingView; } // OC -> JS // 在OC中调用JS #pragma mark - UIWebViewDelegate - (void)webViewDidFinishLoad:(UIWebView *)webView { // 执行JS代码，将大众点评网页里面的多余的节点删掉 NSMutableString *js1 = [NSMutableString string]; // 0.删除顶部的导航条 [js1 appendString:@"var header = document.getElementsByTagName('header')[0];"]; [js1 appendString:@"header.parentNode.removeChild(header);"]; // 1.删除底部的链接 [js1 appendString:@"var footer = document.getElementsByTagName('footer')[0];"]; [js1 appendString:@"footer.parentNode.removeChild(footer);"]; // OC中调用js [webView stringByEvaluatingJavaScriptFromString:js1]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ NSMutableString *js2 = [NSMutableString string]; // 2.删除浮动的广告 [js2 appendString:@"var list = document.body.childNodes;"]; [js2 appendString:@"var len = list.length;"]; [js2 appendString:@"var banner = list[len - 1];"]; [js2 appendString:@"banner.parentNode.removeChild(banner);"]; [webView stringByEvaluatingJavaScriptFromString:js2]; // 显示scrollView webView.scrollView.hidden = NO; // 删除圈圈 [self.loadingView removeFromSuperview]; }); } @end
js页面调用OC
oc加载的页面中，url链接跳转及请求，都会被shouldStartLoadWithRequest这个代理方法拦截，因而，我们在这里做处理。
html页面和oc两方都协商好，使用一个头文件来定义一个url链接请求，如：
// 调用OC中call方法 window.location.href = 'hm://call';
hm:// 就是相应的头文件了。接着，通过截取字符串的方式，来判断头文件是“hm://”开头的就是请求oc代码
具体代码实现。
test.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <div> <button onclick="fn_open_camera();">拍照</button> </div> <div> <button onclick="fn_call();">打电话</button> </div> <a href="http://www.baidu.com">百度</a> <script> function fn_call() { // 调用OC中call方法 window.location.href = 'hm://call'; } function fn_open_camera() { // 调用OC中openCamera方法 window.location.href = 'hm://openCamera'; } </script> </body> </html>
oc相关代码
#import "HMViewController.h" @interface HMViewController () <UIWebViewDelegate> @end @implementation HMViewController - (void)viewDidLoad { [super viewDidLoad]; // 1.webView UIWebView *webView = [[UIWebView alloc] init]; webView.frame = self.view.bounds; webView.delegate = self; [self.view addSubview:webView]; // 2.加载网页 NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [webView loadRequest:request]; } #pragma mark - UIWebViewDelegate /** * webView每当发送一个请求之前，都会先调用这个方法（能拦截所有请求） */ - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *url = request.URL.absoluteString; NSRange range = [url rangeOfString:@"hm://"]; NSUInteger loc = range.location; if (loc != NSNotFound) { // url的协议头是hm // 方法名 NSString *method = [url substringFromIndex:loc + range.length]; // 转成SEL SEL sel = NSSelectorFromString(method); [self performSelector:sel withObject:nil]; } return YES; } /** * 打电话 */ - (void)call { NSLog(@"call----"); } /** * 打开照相机 */ - (void)openCamera { NSLog(@"openCamera----"); } @end
上面这样就实现了，点击拍照和打开照相机，都会调用oc代码，而点击百度，则跳到百度的页面。
网易新闻详情
#import "HMViewController.h" @interface HMViewController () @end @implementation HMViewController - (void)viewDidLoad { [super viewDidLoad]; // 1.url // http://c.m.163.com/nc/article/A7A94MCL00963VRO/full.html NSURL *url = [NSURL URLWithString:@"http://c.m.163.com/nc/article/A7AQOT560001124J/full.html"]; // 2.requets NSURLRequest *request = [NSURLRequest requestWithURL:url]; // 3.发送请求 [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) { NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil]; NSDictionary *news = dict[@"A7AQOT560001124J"]; [self showNews:news]; }]; } - (void)showNews:(NSDictionary *)news { // 1.取出网页内容 NSString *body = news[@"body"]; // 2.取出图片 NSDictionary *img = [news[@"img"] lastObject]; NSString *imgHTML = [NSString stringWithFormat:@"<img src="%@" width="300" height="171">", img[@"src"]]; // 2.创建一个webView，显示网页 UIWebView *webView = [[UIWebView alloc] init]; webView.frame = self.view.bounds; [self.view addSubview:webView]; // 3.拼接网页内容 NSString *html = [body stringByReplacingOccurrencesOfString:img[@"ref"] withString:imgHTML]; // 4.取出新闻标题 NSString *title = news[@"title"]; // 5.取出新闻的时间 NSString *time = news[@"ptime"]; // 头部内容 NSString *header = [NSString stringWithFormat:@"<div class="title">%@</div><div class="time">%@</div>", title, time]; html = [NSString stringWithFormat:@"%@%@", header, html]; // 链接mainBundle中的CSS文件 NSURL *cssURL = [[NSBundle mainBundle] URLForResource:@"news" withExtension:@"css"]; html = [NSString stringWithFormat:@"%@<link rel="stylesheet" href="%@">", html, cssURL]; // 5.加载网页内容 [webView loadHTMLString:html baseURL:nil]; } @end
UIWebView加载POST请求
NSURL *url = [NSURL URLWithString: @"http://your_url.com"]; NSString *body = [NSString stringWithFormat: @"arg1=%@&arg2=%@", @"val1",@"val2"];
NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL: url]; [request setHTTPMethod: @"POST"]; [request setHTTPBody: [body dataUsingEncoding: NSUTF8StringEncoding]]; [webView loadRequest: request]