iOS 8 WkWebView 网页的配置和前进，后退，js 交互和进度条的加载

           本文也将讲解到WebKit中更新的WKWebView控件的新特性与使用方法，它很好的解决了UIWebView存在的内存、加载速度等诸多问题。

一、WKWebView新特性

• 在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）；
• 允许JavaScript的Nitro库加载并使用（UIWebView中限制）；
• 支持了更多的HTML5特性；
• 高达60fps的滚动刷新率以及内置手势；
• 将UIWebViewDelegate与UIWebView重构成了14类与3个协议；

二、代码实现。

//  Created by 周双建 on 15/12/21.

//  Copyright © 2015年周双建. All rights reserved.

//

#import "ViewController.h"

//要导入其框架

#import <WebKit/WKWebView.h>

#import <WebKit/WebKit.h>

typedef enum {

    URL_load = 0,

    HTML_load ,

    Data_load ,

    Fiel_load,

}WkwebLoadType;

@interface ViewController ()<WKNavigationDelegate,WKUIDelegate>

//创建一个实体变量

@property(nonatomic,strong)WKWebView * ZSJ_WkwebView;

// 加载type

@property(nonatomic,assign)NSInteger  IntegerType;

// 设置加载进度条

@property(nonatomic,strong)UIProgressView *  ProgressView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    [self makeNav];

    // 创建进度条

    if (!self.ProgressView) {

        self.ProgressView = [[UIProgressViewalloc]initWithProgressViewStyle:UIProgressViewStyleDefault];

        self.ProgressView.frame =CGRectMake(0,64, self.view.bounds.size.width,1);

        // 设置进度条的色彩

        [self.ProgressViewsetTrackTintColor:[UIColorclearColor]];

        self.ProgressView.progressTintColor = [UIColormagentaColor];

        [self.viewaddSubview:self.ProgressView];

    }

    //初始化webview

    if (!self.ZSJ_WkwebView) {

        //设置网页的配置文件

        WKWebViewConfiguration * Configuration = [[WKWebViewConfigurationalloc]init];

        //允许视频播放

        Configuration.allowsAirPlayForMediaPlayback =YES;

        // 允许在线播放

        Configuration.allowsInlineMediaPlayback =YES;

        // 允许可以与网页交互，选择视图

        Configuration.selectionGranularity = YES;

        //创建更改数据源

        NSString * JS = [NSStringstringWithFormat:@"loadDetail(\"%d\")",70];

        WKUserScript * script = [[WKUserScriptalloc] initWithSource:JSinjectionTime:WKUserScriptInjectionTimeAtDocumentEndforMainFrameOnly:YES];

        WKUserContentController * UserContentController = [[WKUserContentControlleralloc]init];

        [UserContentController addUserScript:script];

        // 是否支持记忆读取

        Configuration.suppressesIncrementalRendering =YES;

        // 允许用户更改网页的设置

        Configuration.userContentController = UserContentController;

        self.ZSJ_WkwebView = [[WKWebViewalloc]initWithFrame:CGRectMake(0,66, self.view.bounds.size.width,self.view.bounds.size.height -111)configuration:Configuration];

        // 设置代理

        self.ZSJ_WkwebView.navigationDelegate =self;

        self.ZSJ_WkwebView.UIDelegate =self;

        // 添加进度监控

        /*

            NSKeyValueObservingOptionNew 把更改之前的值提供给处理方法

         

         　　NSKeyValueObservingOptionOld把更改之后的值提供给处理方法

         

         　　NSKeyValueObservingOptionInitial把初始化的值提供给处理方法，一旦注册，立马就会调用一次。通常它会带有新值，而不会带有旧值。

         

         　　NSKeyValueObservingOptionPrior分2次调用。在值改变之前和值改变之后。

         

         */

        [self.ZSJ_WkwebViewaddObserver:selfforKeyPath:@"estimatedProgress"options:NSKeyValueObservingOptionNewcontext:nil];

        //开启手势触摸

        self.ZSJ_WkwebView.allowsBackForwardNavigationGestures = YES;

        // 设置 可以前进和 后退

        //适应你设定的尺寸

        [self.ZSJ_WkwebViewsizeToFit];

        //选择加载方式

        [selfloadinteger:HTML_load];

        //添加到主控制器上

        [self.viewaddSubview:self.ZSJ_WkwebView];

        [self makefourbtn];

        

    }

    // Do any additional setup after loading the view, typically from a nib.

}

-(void)makeNav{

    UILabel * Nav_Label = [[UILabelalloc]initWithFrame:CGRectMake(self.view.center.x-100,20, 200, 44)];

    Nav_Label.text = @"成功QQ吧提供";

    Nav_Label.textAlignment =NSTextAlignmentCenter;

    Nav_Label.font = [UIFontitalicSystemFontOfSize:22];

    [self.viewaddSubview:Nav_Label];

    

    UIView * Line = [[UIViewalloc]initWithFrame:CGRectMake(0,63.5, self.view.bounds.size.width,0.5)];

    Line.backgroundColor  = [UIColorlightGrayColor];

    [self.viewaddSubview:Line];

    

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)),dispatch_get_main_queue(), ^{

    });

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

-(void)makefourbtn{

    NSArray * WkWeb_Title = @[@"重载",@"后退",@"前进",@"跳转"];

    for (int i=0 ; i<4; i ++) {

        UIButton * button = [UIButtonbuttonWithType:UIButtonTypeCustom];

        button.frame =CGRectMake(10+i*((self.view.bounds.size.width-50)/4+10),self.view.bounds.size.height -45, (self.view.bounds.size.width-50)/4,40);

        [button setTitle:WkWeb_Title[i]forState:UIControlStateNormal];

        button.layer.borderWidth =0.5;

        [button setTitleColor:[UIColorblackColor] forState:UIControlStateNormal];

        button.tag = i;

        [button addTarget:selfaction:@selector(ClicK:)forControlEvents:UIControlEventTouchUpInside];

        [self.viewaddSubview:button];

    }

}

-(void)ClicK:(UIButton *)Btn{

    switch (Btn.tag) {

        case 0:{

//            //这个是带缓存的验证

//            [self.ZSJ_WkwebView reloadFromOrigin];

            // 是不带缓存的验证，刷新当前页面

            [self.ZSJ_WkwebViewreload];

        }

            break;

        case 1:{

           // 后退

            // 首先判断网页是否可以后退

            if (self.ZSJ_WkwebView.canGoBack) {

                [self.ZSJ_WkwebViewgoBack];

            }

        }

            break;

        case 2:{

            // 前进

            // 判断是否可以前进

            if (self.ZSJ_WkwebView.canGoForward) {

                [self.ZSJ_WkwebViewgoForward];

            }

        }

            break;

        case 3:{

           //进行跳转,我们设置跳转的返回到第一个界面

            NSLog(@"%@",self.ZSJ_WkwebView.backForwardList.backList);

            if (self.ZSJ_WkwebView.backForwardList.backList.count >2) {

                [self.ZSJ_WkwebViewgoToBackForwardListItem:self.ZSJ_WkwebView.backForwardList.backList[0]];

            }

        }

            break;

        default:

            break;

    }

}

-(void)loadinteger:(NSInteger)integer{

    switch (integer) {

        case 0:{

            //创建一个NSURLRequest的对象

            NSURLRequest * Request_zsj = [NSURLRequestrequestWithURL:[NSURLURLWithString:@"http://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gbk&word=%C3%C0%C5%AE%CD%BC%C6%AC%B4%F3%CD%BC&fr=ala&ala=1&alatpl=cover&pos=0#z=0&pn=&ic=0&st=-1&face=0&s=0&lm=-1"]];

            //加载网页

            [self.ZSJ_WkwebViewloadRequest:Request_zsj];

         }

            break;

        case 1:{

            // 获取文件路径

            NSString *resourcePath = [ [NSBundlemainBundle] resourcePath];

            NSString *filePath = [resourcePathstringByAppendingPathComponent:@"test.html"];

            NSString *htmlstring =[[NSStringalloc] initWithContentsOfFile:filePathencoding:NSUTF8StringEncodingerror:nil];

            [self.ZSJ_WkwebViewloadHTMLString:htmlstring baseURL:[NSURLURLWithString:[[NSBundlemainBundle] bundlePath]]];

          

        }

            break;

        case 2:{

            

        }

            break;

        case 3:{

            

        }

            break;

        default:

            break;

    }

}

//这个是网页加载完成，导航的变化

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

    

    /*

       主意：这个方法是当网页的内容全部显示（网页内的所有图片必须都正常显示）的时候调用（不是出现的时候就调用），，否则不显示，或则部分显示时这个方法就不调用。

     */

    NSLog(@"加载完成调用");

    // 获取加载网页的标题

    NSLog(@"加载的标题：%@",self.ZSJ_WkwebView.title);

 }

//开始加载

-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{

    //开始加载的时候，让加载进度条显示

    self.ProgressView.hidden =NO;

    NSLog(@"开始加载的时候调用。。");

    NSLog(@"%lf",  self.ZSJ_WkwebView.estimatedProgress);

}

//内容返回时调用

-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{

    NSLog(@"当内容返回的时候调用");

    NSLog(@"%lf",  self.ZSJ_WkwebView.estimatedProgress);

}

-(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{

    NSLog(@"这是服务器请求跳转的时候调用");

}

-(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{

    // 内容加载失败时候调用

    NSLog(@"这是加载失败时候调用");

    NSLog(@"%@",error);

}

-(void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{

    NSLog(@"通过导航跳转失败的时候调用");

}

-(void)webViewDidClose:(WKWebView *)webView{

    NSLog(@"网页关闭的时候调用");

}

-(void)webViewWebContentProcessDidTerminate:(WKWebView *)webView{

    NSLog(@"%lf",   webView.estimatedProgress);

}

-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

    // 获取js 里面的提示

}

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

    // js 信息的交流

}

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

    // 交互。可输入的文本。

}

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{

    // 首先，判断是哪个路径

    if ([keyPath isEqualToString:@"estimatedProgress"]) {

         // 判断是哪个对象

        if (object == self.ZSJ_WkwebView) {

            NSLog(@"进度信息：%lf",self.ZSJ_WkwebView.estimatedProgress);

            if (self.ZSJ_WkwebView.estimatedProgress ==1.0) {

                //隐藏

                self.ProgressView.hidden =YES;

            }else{

            // 添加进度数值

            self.ProgressView.progress =self.ZSJ_WkwebView.estimatedProgress;

            }

        }

    }

}

//注意，观察的移除

-(void)dealloc{

    [selfremoveObserver:selfforKeyPath:@"estimatedProgress"];

}

@end

三、效果图。