WKWebview的基本使用

在开发过程中,iOS 中实现加载 web 页面主要有两种控件,UIWebView 和 WKWebview,两种控件对应具体的实现方法不同。WKWebView是苹果公司在iOS8系统推出的,这里主要概述WebKit中更新的WKWebView控件的新特性与使用方法,以及小编在开发过程中踩的坑。

一、相比于UIWebView的优势:

  1. 在性能、稳定性、占用内存方面有很大提升;
  2. 允许JavaScript的Nitro库加载并使用(UIWebView中限制)
  3. 增加加载进度属性:estimatedProgress,不用在自己写假进度条了
  4. 支持了更多的HTML的属性

二、WKWebview的常用属性

@property (nullable, nonatomic, readonly, copy) NSString *title;

@property (nullable, nonatomic, readonly, copy) NSURL *URL;

@property (nonatomic, readonly, getter=isLoading) BOOL loading;
//加载进度
@property (nonatomic, readonly) double estimatedProgress;

三、WKWebview的常用方法

- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;

- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));

- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0));

四、WKNavigationDelegate代理的方法

#pragma mark - WKNavigationDelegate
/* 页面开始加载 */
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
    NSLog(@"页面开始加载");
}
/* 开始返回内容 */
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
    NSLog(@"开始返回内容");
}
/* 页面加载完成 */
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    NSLog(@"页面加载完成");
}
/* 页面加载失败 */
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{
    NSLog(@"页面加载失败");
}
/* 在发送请求之前,决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    //允许跳转
    decisionHandler(WKNavigationActionPolicyAllow);
    //不允许跳转
    //decisionHandler(WKNavigationActionPolicyCancel);
}
/* 在收到响应后,决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{

    NSLog(@"%@",navigationResponse.response.URL.absoluteString);
    //允许跳转
    decisionHandler(WKNavigationResponsePolicyAllow);
    //不允许跳转
    //decisionHandler(WKNavigationResponsePolicyCancel);
}

五、小编的实例Demo

首先遵守协议:

<WKUIDelegate, WKNavigationDelegate>

其次创建一个WKWebView

#pragma mark - 创建webView
- (void)createWebView{

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.selectionGranularity = WKSelectionGranularityDynamic;
    config.allowsInlineMediaPlayback = YES;
    WKPreferences *preferences = [WKPreferences new];
    //是否支持JavaScript
    preferences.javaScriptEnabled = YES;
    //不通过用户交互,是否可以打开窗口
    preferences.javaScriptCanOpenWindowsAutomatically = YES;
    config.preferences = preferences;
    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.webView];

    /* 加载服务器url的方法*/
    NSString *url = @"https://www.baidu.com";
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:url]];
    [self.webView loadRequest:request];

    self.webView.navigationDelegate = self;
    self.webView.UIDelegate = self;

}

这样就可以在webView中正常加载百度首页了。

不过,在开发中有时遇到网络不佳的时候,想给用户显示一个加载网页的进度,加载完成后,想再navigation中显示网页的标题,就需要对WKWebView的"estimatedProgress"和

"title"进行监听了。

首先创建一个进度条

- (void)createProgressView{
    self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 88, SCREEN_WIDTH, 2)];
    self.progressView.progressViewStyle = UIProgressViewStyleDefault;
    self.progressView.tintColor = [UIColor blueColor];
    self.progressView.trackTintColor = [UIColor greenColor];
    [self.view addSubview:self.progressView];
}

让webView对“进度”和“标题”进行监听

[self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
[self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:NULL];

最后,完成对KVO的回调

#pragma mark - KVO回馈
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        double progress = _webView.estimatedProgress;
        self.progressView.alpha = 1.0f;
        [self.progressView setProgress:progress animated:YES];
        if(progress >= 1){
            [UIView animateWithDuration:0.25 delay:0.25 options:UIViewAnimationOptionCurveEaseOut animations:^{
                self.progressView.alpha = 0.0f;
            } completion:^(BOOL finished) {
                [self.progressView setProgress:0.0f animated:NO];
            }];
        }
        if ([change[@"new"] floatValue] <[change[@"old"] floatValue]) {
            return;
        }
        if ([change[@"new"]floatValue] == 1.0) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

            });
        }
    }
    else if ([keyPath isEqualToString:@"title"]){
        self.title = change[@"new"];
    }
}

这样就实现了对加载进度的显示了。

原文地址:https://www.cnblogs.com/xjf125/p/10147928.html

时间: 2024-11-25 16:21:39

WKWebview的基本使用的相关文章

WKWebView的新特性与使用

在WWDC2014中,苹果推出了最新的iOS8系统,其中也伴随着很多控件的更新与升级.其中全新的WebKit库让人很是兴奋.本文也将讲解到WebKit中更新的WKWebView控件的新特性与使用方法,它很好的解决了UIWebView存在的内存.加载速度等诸多问题. 环境信息: Mac OS X 10.10.1 Xcode 6.1.1 iOS 8.1 正文: 一.WKWebView新特性 在性能.稳定性.功能方面有很大提升(最直观的体现就是加载网页是占用的内存,模拟器加载百度与开源中国网站时,WK

iOS 【野路子】获取WKWebView内容高度做H5原生连接

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~ 插两个链接,是我朋友的大家也可以做个对比 iOS [终极方案]精准获取webView内容高度,自适应高度 iOS

iOS开发之WKWebView简单使用和常用使用场景

iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版.本着对新事物的好奇,就上网查了一下,但是找了好多个都没说的多了详细,于是就问谷歌,找文档,看看使用方法,试用了一下,果然不错,记录下来,大家分享! WKWebView的特点: 性能高,稳定性好,占用的内存比较小, 支持JS交互 支持HTML5 新特性 可以添加进度条(然并卵,不好用,还是习惯第三方的). 支持内建手势, 据说高达60fps的刷

使用WKWebView替换UIWebView

开发App的过程中,常常会遇到在App内部加载网页,通常用UIWebView加载.这个自iOS2开始使用的网页加载器一直是开发的心病:加载速度慢,占用内存多,优化困难.如果加载网页多,还可能因为过量占用内存而给系统kill掉.各种优化的方法效果也不那么明显(点击查看常用优化方法). iOS8以后,苹果推出了新框架Wekkit,提供了替换UIWebView的组件WKWebView.各种UIWebView的问题没有了,速度更快了,占用内存少了,一句话,WKWebView是App内部加载网页的最佳选择

UIWebView和WKWebView的使用及js交互

UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复杂.周末花了点时间研究了一下,确实和其他的不太一样,但是 也不见复杂. 要知道的事情 ios的webview有2个类,一个叫UIWebView,另一个是WKWebView.两者的基础方法都差不多,本文重点是后者,他是取代UIWebView出现的,在app开发者若不需要兼容ios8之前版本,都应该使用

UIWebView,WKWebView 与js交互

现在越来越多的APP需要进行网页之间的交互了,而在iOS中,加载网页的方式为UIWebView与WKWebView这两个控件. 今天就来讲一讲这两个控件怎么进行js交互吧.至于这两个控件之间的区别应该都懂..那我就不说了. 1.UIWebView - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script; 在UIWebView中提供了这个方法,这个方法就是用来执行js的 <!DOCTYPE h

UIWebView v.s. WKWebView

从初学Objective-C到现在学习iOS开发已经快要一个半月了.最近刚刚学完基本的UIView控件部分,想着先做一个简单的浏览器app练练手. 为什么我要做一款浏览器app呢?我平时特喜欢用手机浏览器app上网,但使用主流浏览器发现有两个缺点: 现在的浏览器可视面积不够大.平时用手机app浏览网页时总觉得上边的状态栏和下边的工具栏太碍眼.尤其是横屏浏览时,本来就高度有限,这俩霸王又占去一大块地儿,最后就只留下中间窄窄的一个横条区域,更加不够用. 现在的浏览器没有针对大屏幕手机的操控进行优化.

iOS8 WebKit库之——WKWebView篇

apple和google为webkit该浏览器引擎的发扬光大做出了重要贡献,在WWDC 2014发布会上发布iOS 8中,apple公布了WebKit框架,这意味着OSX和IOS开发者将共用同样的开发库,新改变可以提高开发者编写的代码的重复使用性. webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safari一样快. 第一.WKWebView增加的属性和

iOS WKWebView添加网页加载进度条(转)

一.效果展示 WKWebProgressViewDemo.gif 二.主要步骤 1.添加UIProgressView属性 @property (nonatomic, strong) WKWebView *wkWebView; @property (nonatomic, strong) UIProgressView *progressView; 2.初始化progressView - (void)viewDidLoad { [super viewDidLoad]; //进度条初始化 self.pr

iOS网络3—UIWebView、WKWebView使用详解

一.整体介绍 UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView.通过简单的测试即可发现UIWebView占用过多内存,且内存峰值更是夸张.WKWebView网页加载速度也有提升,但是并不像内存那样提升那么多.下面列举一些其它的优势: 更多的支持HTML5的特性 官方宣称的高达60fps的滚动刷新率以及内置手势 Safari相同的JavaScript引擎 将UIWebViewDelegate与UIWebView拆分成了