webkit＋各种js交互方法

一、版本

8系统前，用UIWebView

8系统后，用webkit，WKWebView

因为webkit有两大优点：

1、占用内存更小，

2、可以通过回调直接捕捉网页上的alert，输入等js操作

二、代码

第一部分：UIViewController

//
//  ViewController.m
//  WKWebView
//
//  Created by nnandzc on 16/11/6.
//  Copyright © 2016年 nnandzc. All rights reserved.
//
#import"ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import <WebKit/WebKit.h>


@interfaceViewController ()
<
WKUIDelegate,
WKNavigationDelegate,
WKScriptMessageHandler
>

@property (nonatomic,strong)WKWebView *webView;
@property (nonatomic,strong,readonly)JSContext    *jsContext;

@end

@implementation ViewController

- (void)viewDidLoad {
    [superviewDidLoad];
    [selfwebView];
}

- (WKWebView *)webView
{
    if(!_webView)
    {
        // js配置
        WKUserContentController *userContentController = [[WKUserContentControlleralloc]init];
        [userContentController addScriptMessageHandler:selfname:@"jsCallOC"];
       
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfigurationalloc]init];
        configuration.userContentController = userContentController;
       
        _webView = [[WKWebViewalloc]initWithFrame:self.view.boundsconfiguration:configuration];
        _webView.navigationDelegate = self;
        _webView.UIDelegate = self;
       
        [_webViewaddObserver:selfforKeyPath:@"estimatedProgress"options:NSKeyValueObservingOptionNewcontext:nil];
       
       
        NSString *path = [[NSBundlemainBundle]bundlePath];
        NSURL *baseURL = [NSURLfileURLWithPath:path];
        NSString * htmlPath = [[NSBundlemainBundle]pathForResource:@"index1"
                                                              ofType:@"html"];
        NSString * htmlCont = [NSStringstringWithContentsOfFile:htmlPath
                                                        encoding:NSUTF8StringEncoding
                                                           error:nil];
        [self.webViewloadHTMLString:htmlContbaseURL:baseURL];
       
//        [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
        [self.viewaddSubview:_webView];

    }
    return_webView;
}

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    if (object ==_webView && [keyPathisEqualToString:@"estimatedProgress"] ) {
        //这里就不写进度条了，把加载的进度打印出来，进度条可以自己加上去！
        CGFloat newProgress = [[changeobjectForKey:NSKeyValueChangeNewKey]floatValue];
        NSLog(@"%f",newProgress);
    }
}

//页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
//    NSLog(@"%s", __func__);
}
//当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation
{
//    NSLog(@"%s", __func__);
}
//页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
//    _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    [_webViewevaluateJavaScript:@"navigator.userAgent"completionHandler:^(id_Nullable string,NSError *_Nullable error) {
        NSLog(@"string = %@", string);
    }];
}
//页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation
{
//    NSLog(@"%s", __func__);
}

//接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation
{
//    NSLog(@"%s", __func__);
}
//在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
{
//    NSLog(@"%s", __func__);
    decisionHandler(WKNavigationResponsePolicyAllow);
}
//在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
//    NSLog(@"%s", __func__);
    decisionHandler(WKNavigationActionPolicyAllow);
}

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
   
    UIAlertController *alert = [UIAlertControlleralertControllerWithTitle:@"alert"message:@"JS调用alert"preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertActionactionWithTitle:@"确定"style:UIAlertActionStyleDefaulthandler:^(UIAlertAction * _Nonnull action) {
       
    }]];
   
    [selfpresentViewController:alertanimated:YEScompletion:NULL];
    completionHandler();
    NSLog(@"%@", message);
   
}

-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *_Nullable))completionHandler
{
   
}

-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler
{
   
}
@end

第二部分：index1.js

function hello(){
    alert("hello");
}

第三部分：index1.css

#p{
    color:red;
}
#img{
    width:120px;
    height:50px;
}
#a{
    color:yellow;
}

第四部分：index1.html

<!DOCTYPE html>
<html>
    <headlang="zh">
       
        <metacharset="UTF-8">
           
            <title>第一个HTML</title>
           
            <linkrel="stylesheet"type="text/css"href="index1.css">
               
                <scripttype="text/javascript"src="index1.js"></script>
    </head>
    <body>
       
        <h1>我是HTML</h1>
       
        <pid ="p">p标签</p>
       
        <imgid ="img"src ="image.png"alt ="百度LOGO"><br/>
           
            <aid ="a"href="[http://baidu.com]()">我要到百度</a>
           
            <br/><br/><br/>
           
            <buttononclick ="hello()">点击我弹出hello</button>
            <inputtype="button"value="测试log"onclick="activityList({'tytyty':'hehe'})" /> 
    </body>
   
</html>

三、总结：以上代码解决了

1、网页、自定义html内容加载

2、加载过程中的回调操作

3、对于已经webkit已经替我们做好事件响应链的几个操作的回调：网页弹出alert，网页输入文字等

4、如果想通过web端调用OC端，则通过WKNavigation中的request属性，截获到服务端的请求，客户端可以和服务端约定好字符串，截获到这一段字符串时，客户端就可以为匹配字符串定义操作。参数也可以通过字符串传递给客户端

5、获取网页元素属性，和UIWebView一样，也是执行一个类似evaluateJavascript的方法，只不过WKWebView是block形式的，UIWebView是返回值形式的