H5学习07之webView与网页交互

本篇内容：

1，在oc中改变网页内容
2，在网页中调用ios的某些功能
3，网页新闻页面的简单制作

开发iOS程序的过程中，在用到网页的时候的交互，我分为两种：

1， OC与网页交互：在oc中改变网页内容，也就是在oc中调用网页的代码，实现网页布局或者内容的改变，比如说在oc中删除网页的某些标签或者改变某些布局。
2，网页与OC交互：在网页中形式上调用oc代码，实现ios的某些网页无法实现的功能，比如点击网页的按钮实现打开相册或者打电话等

一，在oc中改变网页内容：

1，我们以打开百度手机网页为例，在oc端利用oc与网页交互删除网页上的百度图标：
思路：通过webView的代理方法，在网页加载完成之后，找到需要被操作的标签的id，然后用js取出这个标签，并移除，然后在oc中通过webView调用相应的代码执行刚才取出并移除标签的js语句即可
oc调用网页代码.gif
代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com/index.php?tn=monline_3_dg"]]];
    self.webView.delegate = self;
    self.webView.hidden = YES;
    self.view.backgroundColor = [UIColor blueColor];
    
    self.indicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    self.indicatorView.center = CGPointMake(self.view.bounds.size.width*0.5, self.view.bounds.size.height*0.5);
    [self.view addSubview:_indicatorView];
    [self.indicatorView startAnimating];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //找到标签的id，然后用js取出这个标签，并移除即可，然后使用下面的这个方法调用js代码就搞定了
    [webView stringByEvaluatingJavaScriptFromString:@"var div = document.getElementById('logo');div.parentNode.removeChild(div);"];
    [self.indicatorView removeFromSuperview];
    self.webView.hidden = NO;
    
}

二，在网页中调用ios的某些功能

我们以一个简单的网页为基础，在该网页上实现打开摄像头，相册和打电话功能：
思路：通过webView的代理方法进行监听，每当有网页的window的location改变的时候就会监听到改变，我们只需要在网页中进行手动改变location这个属性，然后定义一个自己的协议，在oc里面判断筛选到我们自己的协议的时候执行相应的oc操作即可
网页中调用ios功能
具体代码如下：

//网页中代码：（css代码请自行添加）
<div class="container">
    <div><button onclick="openCamera()">打开摄像头</button></div>
    <div><button onclick="openAlbum()">打开相册</button></div>
    <div><button onclick="call10086()">打电话给10086</button></div>
</div>

<script type="text/javascript">
    //每当有网页跳转的时候其实都是修改了window的location属性，而oc中webview的监听方法也会监听这个属性变化
    //那我们修改了这个属性之后，设置一个自定义的协议，就可以进行监听，然后根据协议内容在oc中做出相应的操作
    function openCamera() {
        window.location.href = "imp://openCamera";
    }
    function openAlbum() {
        window.location.href = "imp://openAlbum";
    }
    function call10086() {
        window.location.href = "imp://call10086";
    }
</script>=

//oc中代码：
- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"OpenCamera" withExtension:@"html"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
    self.webView.delegate = self;
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.absoluteString containsString:@"imp://"]) {
//        NSLog(@"自定义协议---%@",request.URL.absoluteString);
        NSString *operation = [request.URL.absoluteString substringFromIndex:@"imp://".length];
//        NSLog(@"需要做的操作是：%@",operation);
        if ([operation isEqualToString:@"openCamera"]) {
            //当拦截到相应的操作命令的时候执行自定义的相应操作
            [self openCamera];
        }else if ([operation isEqualToString:@"openAlbum"]){
            [self openAlbum];
        }else if ([operation isEqualToString:@"call10086"]){
            [self call10086];
        }
    }
    return YES;
}
- (void)openCamera{
    NSLog(@"001");
    //相机在模拟器中是不起作用的
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    [self presentViewController:picker animated:YES completion:nil];
}
- (void)openAlbum{
    NSLog(@"002");
    UIImagePickerController *picker = [[UIImagePickerController alloc] init];
    picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    [self presentViewController:picker animated:YES completion:nil];
}
- (void)call10086{
    NSLog(@"003");
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"tel://10086"]];
}

三，网页新闻页面的简单制作

我这只是简单的把图片进行了替换，然后展示html内容，至于标题什么的可以直接通过标签添加，然后把标签拼接到对应的html的body字符串前面即可，或者其他方式也行，比较简单我这里就不演示了
思路：发送网络请求请求到的json数据中含有html，把html中的对应信息在oc中进行拼接或者相应的更改，比如标题拼接，图片内容替换等等，之后通过webView展示html即可

网易新闻页面.gif

代码如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    //地址
//    http://c.m.163.com/nc/article/BM22UB6505188ANB/full.html
    
    //发送网络请求，请求到数据
    NSURLSession *session = [NSURLSession sharedSession];
    NSURLSessionDataTask *dataTask = [session dataTaskWithURL:[NSURL URLWithString:@"http://c.m.163.com/nc/article/BM22UB6505188ANB/full.html"] completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        if(error || !data ) return;
        NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
//        取出数据
        NSDictionary *resultDict = dict[@"BM22UB6505188ANB"];
        //取出其中的html的body字符串
        __block NSMutableString *htmlStr = resultDict[@"body"];
//        NSLog(@"%@", resultDict);
        
        //进行图片的替换即可
        NSArray *imageArr = resultDict[@"img"];
        [imageArr enumerateObjectsUsingBlock:^(NSDictionary *imageStr, NSUInteger idx, BOOL * _Nonnull stop) {
//            NSLog(@"%@------\n", imageStr);
            NSString *modifiedImgStr = [NSString stringWithFormat:@"![](%@)",imageStr[@"src"]];
//            NSLog(@"zhangdanfeng-------%@",modifiedImgStr);
            
//            NSLog(@"%@",imageStr[@"ref"]);
            
            htmlStr = (NSMutableString *)[htmlStr stringByReplacingOccurrencesOfString:imageStr[@"ref"] withString:modifiedImgStr];
//            NSLog(@"%@",htmlStr);
        }];
//        self.webView.scalesPageToFit = YES;
        [self.webView loadHTMLString:htmlStr baseURL:nil];
        
    }];
    [dataTask resume];
}

H5学习07之webView与网页交互

一，在oc中改变网页内容：

二，在网页中调用ios的某些功能

三，网页新闻页面的简单制作

推荐阅读更多精彩内容