oc与js交互之WKWebView

WKWebView是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题，它使用Nitro JavaScript引擎，这意味着所有第三方浏览器运行JavaScript将会跟safari一样快.

导入头文件

#import <WebKit/WebKit.h>

配置webView加载页面

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = [[WKUserContentController alloc] init];
    //注册js方法
    [config.userContentController addScriptMessageHandler:self name:@"myWebView"];
    _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height - 80) configuration:config];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.0.114:8020/AppTest/index.html"]]];
    self.webView.navigationDelegate = self;
    self.webView.UIDelegate = self;
    [self.view addSubview:self.webView];

遵守的代理方法有：

WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler

• WKNavigationDelegate (webview.navigationDelegate = self)

// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@"didStartProvisionalNavigation");
}
// 已开始加载页面，可以在这一步向view中添加一个过渡动画
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
}
// 页面已全部加载，可以在这一步把过渡动画去掉
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
}

• WKUIDelegate (self.webView.UIDelegate = self;)

/**
 *  web界面中有弹出警告框时调用（js中alert的拦截）
 *
 *  @param webView           实现该代理的webview
 *  @param message           警告框中的内容
 *  @param frame             主窗口
 *  @param completionHandler 警告框消失调用
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(nonnull WKFrameInfo *)frame completionHandler:(nonnull void (^)(void))completionHandler {
    NSLog(@"%@", message);//哈哈，我是alert
   //显示弹出框代码略，弹出框消失时需要回调completionHandler，否则会crash
    completionHandler();
}

对应js的代码

 <script type="text/javascript">
    alert("哈哈，我是alert");
 </script>

• WKScriptMessageHandler ([config.userContentController addScriptMessageHandler:])

//初始化配置时注册js方法，当js调用oc代码时（如上面的myWebView），会回调此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"WKScriptMessage == %@", message.name);//myWebView
}

对应js代码

 <script type="text/javascript">
    window.webkit.messageHandlers.webViewApp.postMessage(null);
 </script>

oc调js方法

evaluateJavaScript方法，如果有参数格式是getAA(参数，参数...）

[self.webView evaluateJavaScript:@"getAA()" completionHandler:^(id _Nullable info, NSError * _Nullable error) {
        NSLog(@"%@", info);//返回值
    }];

js调oc方法

好像上面已经说过了，再说一遍。。

• 注册js方法
  [config.userContentController addScriptMessageHandler:self name:@"js方法"];
• 处理handler委托
  -(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

其他

    //返回
    [self.webView goBack];
    //前进
    [self.webView goForward];
    
    [self.webView addObserver:self forKeyPath:@"loading" options:(NSKeyValueObservingOptionNew) context:nil];
    //监听加载进度
    [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"loading"]) {
//        gobackBtn.enabled = self.webView.canGoBack;
//        forwardBtn.enabled = self.webView.canGoForward;
    }
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        //progress是UIProgressView
        progress.hidden = self.webView.estimatedProgress==1;
        [progress setProgress:self.webView.estimatedProgress animated:YES];
    }
}

参考链接
http://liuyanwei.jumppo.com/2015/10/17/ios-webView.html