JS交互的方法（上）UIWebView

在这篇文章中我们主要介绍用UIWebView（系统API）和WKWebView(系统API)实现OC与HTML的交互

UIWebView

1. OC调用JS

有时我们会有这样的需求，需要将某个网页加载到我们的APP中，但是又不想用户一眼就看出加载的是网页，这样就需要去掉网页中能看出是网页的元素，例如下面这些元素：

或者仅仅想加载某个页面，不进行跳转，这样就需要去掉网页中能触发跳转时间的元素，例如下面这些元素：

这是我们就要通过OC调用JS的方法来把这些元素删除，怎么做呢，让我们上代码看看：

首先加载页面

    self.homeWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, -68, kScreenWidth, kScreenHeight + 68)];
    [self.view insertSubview:self.homeWebView atIndex:0];

    self.homeWebView.delegate = self;

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.121dian.com/index/h_evyy7j"]];
    [self.homeWebView loadRequest:request];

遵守代理实现代理方法

//遵守代理<UIWebViewDelegate>
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //字符串为HTML语句，为了防止出错，可以打开要加载的网页，到开发者选项中书写语句，然后再拷贝过来
    [webView stringByEvaluatingJavaScriptFromString:
    //查找元素
     @"var headerElement = document.getElementsByTagName('header')[0];"
     //删除元素
     "headerElement.parentNode.removeChild(headerElement);"
     "var appElement = document.getElementsByClassName('app-down')[0];"
     "appElement.parentNode.removeChild(appElement);"
     "var bottomTextElement = document.getElementsByClassName('g-none footer-link')[0];"
     "bottomTextElement.parentNode.removeChild(bottomTextElement);"
     "var sharedTextElement = document.getElementsByClassName('corporate-culture')[0];"
     "sharedTextElement.parentNode.removeChild(sharedTextElement);"
     ""];
}

2. JS调用OC

接下来我们要看一下点击网页的元素，调用OC中的方法这一功能。先来看一下下面的例子，点击网页的图片跳转控制器：

首先加载页面
方法与上面的方法相似，不在赘述。

遵守代理实现代理方法
这次要实现两个代理方法，第一个代理方法是OC调用JS找到相应的元素并添加相应事件（这里是添加点击事件）

-(void)webViewDidFinishLoad:(UIWebView *)webView {
    [self.myWebView stringByEvaluatingJavaScriptFromString:
    //找到对应的元素
     @"var figureElement = document.getElementsByTagName('figure')[0];"
     "var imgElement = figureElement.children[0];"
     //添加相应事件（这里是点击事件）
     "imgElement.onclick = function(){window.location.href = 'http://www.baidu.com'};"
     ""];
}

第二个代理方法在加载页面时调用，返回YES表示加载页面，返回NO表示不加载页面，这个代理方法只有在加载页面时才会调用，所以我们添加的点击事件是加载百度网页，加载时会调用这个代理方法，如果这个代理方法返回NO,就不会真正的加载页面，而我们可以在这个方法中执行我们需要的代码。所以可以认为这个代理方法是个拦截方法。

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    //判断是否是添加点击事件要跳转的网页
    if ([request.URL.absoluteString isEqualToString:@"http://www.baidu.com/"]) {
        //如果是则跳转控制器，同时拦截网页加载
        JumpViewController *jumpVC = [[JumpViewController alloc] init];
        [self.navigationController pushViewController:jumpVC animated:YES];
        return NO;
    }
    return YES;
}