代码改变世界

iOS UI基础-15.0 UIWebView

2015-09-23 15:30  jiangys  阅读(469)  评论(1)  编辑  收藏  举报

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]