WKWebView的使用之JS调用OC
一、功能分析
在做html和原生混合开发的过程中,我们会遇到一些功能,需要在html执行某个特别操作的时候,OC也要做出相应的响应,比如,我们最近的一个项目中,在一个UINavigationController
中加载的html
,而当进入某一个特殊的html
页面时,需要将原生的导航栏换成html
的导航栏,如图:
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
方法。