WKWebView的OC和JS交互

• 使用前导入头文件

#import <WebKit/WebKit.h>

• 遵守代理协议

webView.navigationDelegate = self;

代理方法介绍

• 页面即将开始加载时调用 (拦截网页的网络请求 : JS调用OC)

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

• 页面开始加载时调用

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;

• 在收到响应后,决定是否跳转,即是否把这个链接对应的网页加载到WKWebView上

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

• 当内容开始返回时调用,即服务器已经在向客户端发送网页数据

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;

• 页面加载完成之后调用 (OC调用JS : JS注入)

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;

• 页面加载失败时调用

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;

准备WKWebView

- (void)viewDidLoad {
    [super viewDidLoad];

    // 创建WKWebView
    WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:webView];
    webView.backgroundColor = [UIColor redColor];
    self.webView = webView;

    // 设置代理
    self.webView.navigationDelegate = self;

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

OC调用JS : JS注入 (类似UIWebView)

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    // 拼接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://www.yaowoya.com'};"];

    // OC调用JS代码
    [webView evaluateJavaScript:JSStringM completionHandler:nil];
}

JS调用OC : (类似UIWebView)

// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSLog(@"在发送请求之前，决定是否跳转 decidePolicyForNavigationAction");

    NSString *URLString = navigationAction.request.URL.absoluteString;
    NSLog(@"监测到的WKWebView上的请求 %@",URLString);

    NSRange range = [URLString rangeOfString:@"hm://"];
    if (range.length > 0) {

        [self.navigationController pushViewController:[[TestViewController alloc] init] animated:YES];

        // 不允许跳转,即不加载这个链接对应的内容
        decisionHandler(WKNavigationActionPolicyCancel);
    } else {
        // 允许跳转,即加载这个链接对应的内容
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}