iOS WKWebView 之JS交互

1 OC调用JS

#pragma mark - event response
- (void)rightBtnClicked:(id)sender
{
    //oc调用js代码
    NSString *jsStr = [NSString stringWithFormat:@"ocCallJS('%@')", @"按钮点击"];
    [self.myWebView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
        if (error) {
            NSLog(@"错误:%@", error.localizedDescription);
        }
        NSLog(@"%@", data);
    }];
}

注：data是执行完JS之后返回的数据

0.png

2 JS调用OC

#pragma mark - getter and setter
- (WKWebView *)myWebView
{
    if (_myWebView == nil) {
        // js配置
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addScriptMessageHandler:self name:@"jsCallOC"];
        [userContentController addScriptMessageHandler:self name:@"startLoad"];
        
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
        
        _myWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height - 64) configuration:configuration];
        _myWebView.navigationDelegate = self;
        //_myWebView.UIDelegate = self;
    }
    
    return _myWebView;
}

遵守WKScriptMessageHandler协议并实现方法

#pragma mark - WKScriptMessageHandler method
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    NSLog(@"方法名:%@", message.name);
    NSLog(@"参数:%@", message.body);
    if ([message.name isEqualToString:@"jsCallOC"]) {
        [self jsCallOC:message.body];
    } else if ([message.name isEqualToString:@"startLoad"]) {
        [self startLoad:message.body];
    } else {
        NSLog(@"未实现方法：%@", message.name);
    }
}
#pragma mark - js调OC
- (void)jsCallOC:(id)body
{
    if ([body isKindOfClass:[NSDictionary class]]) {
        NSDictionary *dict = (NSDictionary *)body;
        NSLog(@"%@",dict);
    }
}

- (void)startLoad:(id)body
{
    if ([body isKindOfClass:[NSArray class]]) {
        NSArray *tmpArray = (NSArray *)body;
        NSLog(@"%@",tmpArray);
    }
}

1.png

3 WKNavigationDelegate协议

#pragma mark - WKNavigationDelegate method
/**
 *  在发送请求之前，决定是否跳转
 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSLog(@"%s", __FUNCTION__);
    // 如果不添加这个，那么wkwebview跳转不了AppStore
    if ([webView.URL.absoluteString hasPrefix:@"https://itunes.apple.com"]) {
        NSMutableDictionary *optionDict = [[NSMutableDictionary alloc] init];
        [[UIApplication sharedApplication] openURL:navigationAction.request.URL options:optionDict completionHandler:^(BOOL success) {

        }];
        decisionHandler(WKNavigationActionPolicyCancel);
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

/**
 *  在收到响应后，决定是否跳转
 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
{
    NSLog(@"%s", __FUNCTION__);
    decisionHandler(WKNavigationResponsePolicyAllow);
}

/**
 *  接收到服务器跳转请求之后调用
 */
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  WKNavigation导航错误
 */
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  页面开始加载时调用
 */
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  当内容开始返回时调用
 */
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  页面加载完成之后调用
 */
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  页面加载失败时调用
 */
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error
{
    NSLog(@"%s", __FUNCTION__);
}

/**
 *  身份验证
 */
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler
{
    NSLog(@"%s", __FUNCTION__);
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        NSURLCredential *card = [[NSURLCredential alloc] initWithTrust:challenge.protectionSpace.serverTrust];
        completionHandler(NSURLSessionAuthChallengeUseCredential, card);
    }
}

/**
 *  WKWebView终止
 */
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView
{
    NSLog(@"%s", __FUNCTION__);
}

4 JS中的代码如下

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=1, user-scalable=no">
<title>首页</title>
<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    body,html{
        height: 100%;
        width: 100%;
    }
    section{
        height: 100%;
        width: 100%;
        text-align:center;
    }
    .div{
        float: left;
        position: relative;
        left: 50%;
        top: 30%;
        margin-left: -113px;
        margin-top: -20px;
    }
</style>
<script>
    // $解析器
    function $ (ele) {
        return document.querySelector(ele);
    };

    // 点击确定按钮
    function onClickButton() {
        // 复杂数据
        var list = [1,2,3];
        var dict = {"name":"点滴86", "qq":"66688", "data":input.value, "list":list};
        // JS通知WKWebView
        window.webkit.messageHandlers.jsCallOC.postMessage(dict);
    }
    function ocCallJS(paramStr) {
        return ["Hello", paramStr];
    }
    window.onload = function () {
        var tmpArray = ["点滴86", "66688", ""];
        // JS通知WKWebView
        window.webkit.messageHandlers.startLoad.postMessage(tmpArray);
    }
</script>
</head>

<body >
    <section>
        <div class="div">
            <input type="text" id="input" style="width:150px;line-height:30px">
            <a style="margin-left:10px;width:50px;line-height:30px;display:inline-block;background-color:blue;color:#fff;text-align:center;" id="button" >确定</a>
            <br>
            <span id="show" style="display:inline-block;width:100%;text-align:left;font-size:18px;font-family:'微软雅黑';color:#000;margin-top:20px;" ></span>
            </div>
    </section>
    <script type="text/javascript">
        // 界面渲染完毕执行
        var input = $('#input'),
        button = $('#button'),
        show = $('#show');
        // 按钮监听
        button.addEventListener('click', onClickButton);
    </script>
</body>
</html>