//
//  ViewController.m
//  wkweb
//
//  Created by 柏超曾 on 2017/8/29.
//  Copyright © 2017年 柏超曾. All rights reserved.
//

#import "ViewController.h"
#import <WebKit/WebKit.h>


@interface ViewController ()<WKUIDelegate,WKNavigationDelegate,NSURLConnectionDataDelegate,WKScriptMessageHandler>
//@interface ViewController ()<UIWebViewDelegate>

@property (nonatomic, strong) WKWebView *webView; ///< WKWebView

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    

    //    [self loadWebView]; // 加载测试
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest]; // 加载页面
}
    
    


#pragma mark - get方法
- (WKWebView *)webView {
    if (_webView == nil) {
        // js配置
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addScriptMessageHandler:self name:@"jsCallOC"];
        // js注入，注入一个alert方法，页面加载完毕弹出一个对话框。
        NSString *javaScriptSource = @"alert(\"WKUserScript注入js\");";
        WKUserScript *userScript = [[WKUserScript alloc] initWithSource:javaScriptSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// forMainFrameOnly:NO(全局窗口)，yes（只限主窗口）
        [userContentController addUserScript:userScript];
        
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = userContentController;
        
        // 显示WKWebView
        _webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        _webView.UIDelegate = self; // 设置WKUIDelegate代理
        [self.view addSubview:_webView];
    }
    return _webView;
}


#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"方法名:%@", message.name);
    NSLog(@"参数:%@", message.body);
    // 方法名
    NSString *methods = [NSString stringWithFormat:@"%@:", message.name];
    SEL selector = NSSelectorFromString(methods);
    // 调用方法
    if ([self respondsToSelector:selector]) {
        [self performSelector:selector withObject:message.body];
    } else {
        NSLog(@"未实行方法：%@", methods);
    }
}

#pragma mark js调OC
- (void)jsCallOC:(id)body {
    if ([body isKindOfClass:[NSDictionary class]]) {
        NSDictionary *dict = (NSDictionary *)body;
        // oc调用js代码
        NSString *jsStr = [NSString stringWithFormat:@"ocCallJS('%@')", [dict objectForKey:@"data"]];
        [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable data, NSError * _Nullable error) {
            if (error) {
                NSLog(@"错误:%@", error.localizedDescription);
            }
        }];
    }
}



//#pragma mark - UIWebViewDelegate
//- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
//{
//    NSURL * url = [request URL];
//    if ([[url scheme] isEqualToString:@"firstclick"]) {
//        NSArray *params =[url.query componentsSeparatedByString:@"&"];
//        
//        NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
//        for (NSString *paramStr in params) {
//            NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
//            if (dicArray.count > 1) {
//                NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
//                [tempDic setObject:decodeValue forKey:dicArray[0]];
//            }
//        }
//        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"方式一" message:@"这是OC原生的弹出窗" delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
//        [alertView show];
//        NSLog(@"tempDic:%@",tempDic);
//        return NO;
//    }
//    
//    return YES;
//}



//- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler{
//    
//    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
//        
//        NSURLCredential *credential = [[NSURLCredential alloc]initWithTrust:challenge.protectionSpace.serverTrust];
//        
//        completionHandler(NSURLSessionAuthChallengeUseCredential,credential);
//        
//    }
//    
//    
//    
//}
//- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
//    
//    
//    if (!navigationAction.targetFrame.isMainFrame) {
//        [self.wkWebView loadRequest:navigationAction.request];
//    }
//    
//    return nil;
//}





- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
    
}


@end

<!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":"阳君", "qq":"937447974", "data":input.value, "list":list};-->

var dict = {"name":"阳君", "qq":"937447974"};

                alert(dict);
                    // JS通知WKWebView
                    window.webkit.messageHandlers.jsCallOC.postMessage(dict);
                }
                
                // WKWebView调用JS
                function ocCallJS(params) {
                    show.innerHTML = params;
                }
                
                // alert对话框
                function ale() {
                    alert("这是一个警告对话框！");
                }
                
                // confirm选择框
                function firm() {
                    if(confirm("去百度看看？")) {
                        alert("你选择了去！");
                    } else {
                        alert("你选择了不去！");
                    }
                }
                
                // prompt输入框
                function prom() {
                    var result = prompt("演示一个带输入的对话框", "这里输入你的信息");
                    if(result) {
                        alert("谢谢使用，你输入的是：" + result)
                    }
                }
                </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>
                    <br><br>
                    <input type="submit" value="警告框" onclick="ale()" />
                    <input type="submit" value="选择框" style="margin-left:20px;" onclick="firm()" />
                    <input type="submit" value="输入框" style="margin-left:20px;" onclick="prom()" />
                    </div>
        </section>
        <script type="text/javascript">
            // 界面渲染完毕执行
            var input = $('#input'),
            button = $('#button'),
            show = $('#show');
            // 按钮监听
            button.addEventListener('click', onClickButton);
            </script>
    </body>
</html>