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中的代码如下

    

        

            
            确定