在开发过程中,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];//是否支持JavaScriptpreferences.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"];}
}

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

WKWebview的基本使用相关推荐

  1. 一个KVO 实现WKWebView加载进度条的例子 (注意最后移除观察者)

    // // OpenWebViewController.m // Treasure // // Created by 蓝蓝色信子 on 16/7/29. // Copyright © 2016年 GY ...

  2. WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt

    主要内容 Safari调试 swift/OC与JS互调 增加加载进度条 支持JS中alert.confirm.prompt Safari调试 设置 -> safari --> 高级,开启J ...

  3. wkwebView基本使用方法

    WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate.WKNavigationDelegate主要处理一些跳转.加载处理操作,WKUIDel ...

  4. UITableView嵌套WKWebView的那些坑

    最近项目中遇到了一个需求,TableView中需要嵌套Web页面,我的解决办法是在系统的UITableViewCell中添加WKWebView.开发的过程中,遇到了些坑,写出来分享一下. 1.首先说一 ...

  5. iOS 走近商城 APP(三 WKWebView 商品规格选择框架封装)

    原文链接:http://www.jianshu.com/p/293ee1bfe104 商城 -- 由 3033 分享 开篇 忽然发现最近也只有值班才能写东西了,中间更新了两篇其他的断了下商城相关的文章 ...

  6. iOS WKWebView带进度条封装(只用传入url,可改变进度条颜色)

    1 NSTimer+addition.h #import <Foundation/Foundation.h> @interface NSTimer (addition) /** 暂停时间 ...

  7. iOS下JS与OC互相调用(二)--WKWebView 拦截URL

    在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互. 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WKWebView. 同样的用WKWebVie ...

  8. WKWebView 的使用简介

    1. navigationDelegate [objc] view plaincopy print? - (void)webView:(WKWebView *)webView didStartProv ...

  9. UIWebView、WKWebView使用详解及性能分析

    一.整体介绍 UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView.通过简单的测试即可发现UIWebView占用过多内存,且 ...

  10. WKWebView 那些坑

    导语 WKWebView 是苹果在 WWDC 2014 上推出的新一代 webView 组件,用以替代 UIKit 中笨重难用.内存泄漏的 UIWebView.WKWebView拥有60fps滚动刷新 ...

最新文章

  1. div自己移除自己/移除div下面的所有子元素
  2. Linux Kernel系列一:开篇和Kernel启动概要
  3. python观察日志(part20)--列表中加号,extend,append之间的区别
  4. python完全支持面向对象编程_python面向对象编程----009
  5. Flutter MouseRegion 链接高亮显示样式 只有你想不到 没有你做不到的
  6. mybatis延迟加载(lazy)配置生效的陷阱
  7. 【LeetCode 剑指offer刷题】树题19:8 二叉树中序遍历的下一个结点
  8. open打开新窗口时的选项
  9. 抢占自动驾驶「制高点」,传统Tier1巨头「砸钱入场」
  10. 计算机网络练习题——一起肥学
  11. r语言 断轴 画图_R语言之画图(一)
  12. matlab 回声状态网络ESN的时间序列预测
  13. 《网络是怎样连接的》学习笔记-3
  14. 企业级无线渗透之PEAP
  15. wechat4j获取用户昵称乱码修复
  16. 客厅与阳台之间的设计施工,要不要打通呢?
  17. 人体五脏六腑的作息时间表
  18. ps4 html5转换器,PS4键鼠转换器评测XIM4 主机FPS的福音(X1通用)
  19. 知乎精选:如何提高团队凝聚力和执行力 (转)
  20. idea 下划线字段转驼峰_欲善事先利器——IDEA 插件篇

热门文章

  1. ajax 传对象数组到后台
  2. C语言编译执行的全过程
  3. 微博视频处理系统的云原生之路
  4. 海尔总裁张瑞敏50句管理箴言
  5. 英语watch手表源自wacche
  6. 云计算服务模型,第 2 部分: 平台即服务(PaaS)
  7. 绅士福利:Python秒爬取全网美女写真
  8. ds存储查看 linux,我的NAS我的地盘 篇五:群晖NAS软件介绍与应用之DS Audio篇
  9. 多媒体网络的分布式知识要点
  10. 如何一键导出PPT中的所有图片