OC与Webview交互

在开发iOS应用中，经常会需要用到原生与web之间JS的交互，主要有下列3中情况：

1.与UIWebview交互
2.与WKWebview交互
3.利用JavaScriptCore来完成交互

一、在UIWebview中的交互

我们想在oc中修改网页中的代码，这种技术称为JS注入，可以利用webview中的代理方法

// 网页加载完成后会调用
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {window.location.href='tz:newTab'}"];
    // 执行js代码
    [webView stringByEvaluatingJavaScriptFromString:string];
}

如果想在网页中调用原生的方法，也可以在webview中的代理方法中实现

// 网页将要加载的时候调用
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    // 请求的地址
    NSString *url = request.URL.absoluteString;
    NSLog(@"url--->%@",url);
    // 判断url是否是我们在webViewDidFinishLoad中给轮播图增加的自定义方法
    // 如果是，在判断中增加自己的跳转操作
    if ([url isEqualToString:@"tz:newTab"]) {
        NSLog(@"跳转到新tab页面");
        NewTabVC *newTabvc = [[NewTabVC alloc] init];
        [self.navigationController pushViewController:newTabvc animated:YES];
    }
    return YES;
}

二、在WKWebview中的交互

WKWebview是iOS8以后用来替代UIWebview的组件，在内存占用方面有很大的优化，使用时需要导入
#import
WKWebview的JS注入与UIWebview类似，需要用到navigationDelegate中的方法

// 网页已经加载完的时候调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {window.location.href='tz:newTab'}"];
    // 执行JS代码
    [webView evaluateJavaScript:string completionHandler:nil];
}

网页中调用原生的方法也与UIWebview类似

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSString *url = navigationAction.request.URL.absoluteString;
    if ([url isEqualToString:@"tz:newTab"]) {
        NSLog(@"跳转到新tab页面");
        NewTabVC *newTabvc = [[NewTabVC alloc] init];
        [self.navigationController pushViewController:newTabvc animated:YES];
    }
    
    // 回调必须调用，不可省略
    decisionHandler(WKNavigationActionPolicyAllow);
}

三、利用JavaScriptCore完成交互

JavaScriptCore是苹果在iOS7后推出的，使用时需要导入框架

链接JavaScriptCore框架

在文件头部也需要导入
#import

JS注入

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {pushNewTab()}"];
    // 执行js代码
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    [context evaluateScript:string];
}

JS调用原生代码

    // 执行js代码
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"pushNewTab"] = ^() {
        
        dispatch_async(dispatch_get_main_queue(), ^{
            NSLog(@"%@",[NSThread currentThread]);
            NewTabVC *newTabvc = [[NewTabVC alloc] init];
            [self.navigationController pushViewController:newTabvc animated:YES];
        });
    };

github传送门：https://github.com/slkk/OCWebview