iOS 开发 Object-C和JavaScript交互详解之OC与JS交互在UIWebView中使用

1.需求分析

在浏览器终端中写js代码删除网页中不需要的元素

2.OC调用JS需要实现的代理方法

网页加载完成时调用的代理方法

• 当网页加载完成之后,通过OC的方法调用JS的代码,删除网页展示时不需要的内容
• OC调用JS的代码还可以给网页中的标签添加点击事件或者给网页添加标签

- (void)webViewDidFinishLoad:(UIWebView *)webView;

网页加载完成之后,OC方法调用JS代码

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

3.OC调用JS的具体实现

//
//  ViewController.m
//  OC与JS交互之UIWebView
//
//  Created by Apple on 15/7/13.
//  Copyright © 2015年 zhouyu. All rights reserved.
//

#import "ViewController.h"

@interface ViewController () <UIWebViewDelegate>

//@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (nonatomic, weak) UIWebView *webView;
@end

// 提示 : 做网页和原生界面交互时,需要一个桥梁;这个桥梁就是UIWebView的代理方法

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.navigationItem.title = @"OC与JS交互";

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    [self.view addSubview:webView];
    self.webView = webView;
    self.webView.delegate = self;

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"]];
    [self.webView loadRequest:request];
}

#pragma 网页已经加载完成的代理方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
#pragma OC调用JS的代码
    // 能执行到这个代理方法,说明网页加载完成,里面的标签也都加载完成了
    NSMutableString *stringM = [NSMutableString string];

    // 拼接删除导航的JS代码
    [stringM appendString:@"var headerTag = document.getElementsByTagName('header')[0]; headerTag.parentNode.removeChild(headerTag);"];

    // 拼接删除悬浮按钮的JS代码
    [stringM appendString:@"var footerbtn = document.getElementsByClassName('footer-btn-fix')[0]; footerbtn.parentNode.removeChild(footerbtn);"];

    // 拼接删除网页底部布局JS代码
    [stringM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];

    // OC调用JS的代码
    [webView stringByEvaluatingJavaScriptFromString:stringM];
}

4.OC调用JS代码,给图片(标签)添加点击事件

给标签添加点击事件

[JSStringM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'hm://?src='+this.src};"];

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 拼接JS的代码
    NSMutableString *JSStringM = [NSMutableString string];

    // 删除导航
    [JSStringM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
    // 删除底部悬停按钮
    [JSStringM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
    // 删除底部布局
    [JSStringM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];

    // 给标签添加点击事件
    [JSStringM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'hm://?src='+this.src};"];

    // OC调用JS代码
    [webView stringByEvaluatingJavaScriptFromString:JSStringM];
}

5.JS调用OC需要实现的代理方法

• 拦截webView上所有的网络请求
• JS与OC交互的桥梁

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

6.拦截webView上所有的网络请求,筛选请求

• 给标签添加点击事件的目的 : 使标签可点击

• 点击事件发送网络请求的目的 : 可以拦截到标签的点击事件

• 自定义协议的目的 : 给事件设计一个特殊的标记,如果拦截到请求,就通过特殊的标记来区别要做的事情

/*
 检测UIWebView上所有的网络请求
 return YES : 标示检测到的请求,都可以顺利的发送出去.反之,这个请求不允许发送出去
 */
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSLog(@"%@",request.URL.absoluteString);

    // 拿到网页的请求地址
    NSString *URLString = request.URL.absoluteString;
    // 判断网页的请求地址协议是否是我们自定义的那个
    NSRange range = [URLString rangeOfString:@"hm://?src="];
    if (range.length > 0) {
//        NSLog(@"你点击的是图片");

        // 取出图片的地址
        NSString *imgURLString = [request.URL.absoluteString substringFromIndex:range.location+range.length];
//        NSLog(@"%@",imgURLString);

        // 下载图片
        [[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:imgURLString] options:0 progress:nil completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {

            // 图片下载完成之后,保存到相册
            UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
        }];
    }

    return YES;
}

//系统设计的图片保存到相册的指定方法,不能自定义其他方法
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
    NSLog(@"保存成功");
}

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    // 检测到的所有的请求地址
    NSString *URLString = request.URL.absoluteString;
    NSLog(@"检测 %@",URLString);

    // 判断当前点击的是不是图片标签
    NSRange range = [URLString rangeOfString:@"hm://"];
    if (range.length > 0) {

        // 图片在点击时,如果检测到了@"hm://"这个我们自定义的协议头,那么就去做特定的事情
        [self.navigationController pushViewController:[[TestViewController alloc] init] animated:YES];

        // 这个里面可以写友盟分享的操作

        // 这个URL是自定义的,没有必要去真正的请求数据
        return NO;
    }

    return YES;
}