WKWebView的使用之JS调用OC
一、功能分析
在做html和原生混合开发的过程中，我们会遇到一些功能，需要在html执行某个特别操作的时候，OC也要做出相应的响应，比如，我们最近的一个项目中，在一个UINavigationController中加载的html，而当进入某一个特殊的html页面时，需要将原生的导航栏换成html的导航栏，如图：
原生导航栏.png
html导航栏.png
当从原生导航栏页面点击“添加车辆”时，跳转到html导航栏页面，这时候带搜索框的导航栏就是html的导航栏。通过分析，我们要实现的功能就是，当点击“添加车辆”后，我们要隐藏原生的导航栏，并显示html的导航栏。下面我们说一下功能的实现。
html端预留接口
要实现js调用OC，我们首先要在html代码中预留调用OC的接口，也就是要在html中，按固定格式声明一个方法，方法的格式：
//ActionName：原生中对应的方法名；parameter：回传的参数
window.webkit.messageHandlers.ActionName.postMessage('parameter');
对应的html代码如下：
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function secondClick() {
<!-- share('分享的标题','分享的内容','图片地址');-->
window.webkit.messageHandlers.removeNavigationBar.postMessage('remove navigationBar');
}
function showAlert(message){
alert(message);
}
function thirdClick(){
window.webkit.messageHandlers.AddNavigationBar.postMessage('add navigationBar');
}
</script>
</header>
<body bgcolor="green">
<h2> 这里是第二种方式 </h2>
<br/>
<br/>
<button type="button" onclick="secondClick()">Click Me!</button>
<button type="button" onclick="thirdClick()">ThirdClick!</button>
</body>
</html>
下面看一下OC代码：
1.在实例化WKWebView之前，我们首先要先配置一下WKWebViewConfiguration类，WKWebViewConfiguration是用于初始化web视图的属性集合，能对WKWebView进行一系列的配置。
//进行配置控制器
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
//实例化对象
configuration.userContentController = [WKUserContentController new];
//调用JS方法
[configuration.userContentController addScriptMessageHandler:self name:@"removeNavigationBar"];//移除导航栏
[configuration.userContentController addScriptMessageHandler:self name:@"AddNavigationBar"];//添加导航栏
**注意：WKWebViewConfiguration只在WKWebView第一次初始化时进行配置。当WKWebView初始化完成之后，我们就不能再改变他的配置。官方给出的解释是这样的：
WKWebViewConfiguration is only used when a web view is first initialized. You cannot use this class to change the web view's configuration after it has been created.
2.接下来我们来进行配置WKWebView的偏好设置WKPreferences:
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;
3.下面我们实例化WKWebView，并遵守相关代理：
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, SCREENW, SCREENH-64) configuration:configuration];
self.webView.UIDelegate = self;
self.webView.navigationDelegate = self;
4.下面重点来了，要想让OC能够响应JS的方法，我们光配置WKWebViewConfiguration，给其WKUserContentController添加ScriptMessageHandler还是不够的，我们还需要用到WKScriptMessageHandler协议的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message方法。下面看代码：
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
// message.body -- Allowed types are NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull.
NSLog(@"body:%@",message.body);
if ([message.name isEqualToString:@"AddNavigationBar"]) {
NSLog(@"Add NavigationBar");
[self alertWithTitle:nil message:@"Add NavigationBar"];//弹窗
//添加导航栏的方法
[self addNavigationBar];
} else if ([message.name isEqualToString:@"removeNavigationBar"]) {
NSLog(@"remove NavigationBar");
[self alertWithTitle:nil message:@"remove NavigationBar"];
//隐藏导航栏的方法
[self removeNavigationBar];
}
}
总结
总的来说，要实现JS调用OC方法，重点就是三项：
1.必须在html中预留接口，格式是固定的：window.webkit.messageHandlers.ActionName.postMessage('parameter');
2.陪着WKWebViewConfiguration，并通过WKUserContentController注册html中预留的方法；
3.实现WKScriptMessageHandler协议的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message方法。
