IOS WebviewiOS开发O~2

WKWebView的使用之JS调用OC

2017-03-27  本文已影响3904人  齐小天_Liu

一、功能分析

在做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方法。

上一篇下一篇

猜你喜欢

热点阅读