在上一篇博文我们已经讲了UIWebView的基础知识,这篇博文主要讲的知识点包含如下:
- UIWebView设置
- 清空浏览器的cookies;
- 清除UIWebView的缓存;
- 网页刷新;
- 网页上一页和下一页;
- 网页加载的进度条,效果如qq和微信的网页加载进度条。
1 准备工作
1.1 搭建项目
前期的项目搭建和上一篇博文一样,只是在UINavigationController添加三个按钮。运行后的界面如图所示:
在图中有三个按钮,从左到右分别是刷新、后退和前进。
这里我使用的控制器为AdvancedVC。
//
// AdvancedVC.m
// UIWebView
//
// Created by yangjun on 15/11/4.
// Copyright © 2015年 六月. All rights reserved.
//
#import "AdvancedVC.h"
@interface AdvancedVC ()
@property (weak, nonatomic) IBOutlet UIWebView *webView; ///< UIWebView
@end
@implementation AdvancedVC
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
}
@end
1.2 显示网页
我们使用大家都熟悉的百度做测试,加载网页“https://www.baidu.com”。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
[self.webView loadRequest:urlRequest]; // 加载页面
}
运行项目后,大家会发现一个错误。错误信息为
2.2 页面滚动弹跳
上面说的,你可以滑动到顶部看到背景色,这里有一个弹跳效果。也就是你看见背景色,松开手指看到的效果。这里你可以禁用这种效果。
self.webView.scrollView.bounces = NO;
2.3 缩放
默认情况下UIWebView加载HTML页面后,会以页面的原始大小进行显示,亦即如果页面的大小超出UIWebView视口大小,UIWebView会出现滚动效果,而且用户只能通过滚动页面来查看不同区域的内容,不能使用手指的捏合手势来放大或缩小页面。通过设置
self.webView.scalesPageToFit = YES ;
UIWebView可以缩放HTML页面来适配其视口大小,从而达到整屏显示内容的效果,并且用户可以用捏合动作来放大或缩小页面来查看内容。
3 清空cookies
清空cookies使用到了NSHTTPCookieStorage类,这个类主要用于管理网络中的cookies。
在viewDidLoad方法中添加如下代码,这里我们清空了所有cookies。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSLog(@"清除cookies");
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (NSHTTPCookie *cookie in [storage cookies]) {
[storage deleteCookie:cookie];
}
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
[self.webView loadRequest:urlRequest]; // 加载页面
}
4 清除缓存
清除UIWebView的缓存使用了NSURLCache对象,在这里我们使用removeAllCachedResponses
清楚所有缓存。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSLog(@"清除cookies");
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (NSHTTPCookie *cookie in [storage cookies]) {
[storage deleteCookie:cookie];
}
NSLog(@"清除UIWebView的缓存");
[[NSURLCache sharedURLCache] removeAllCachedResponses];
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
[self.webView loadRequest:urlRequest]; // 加载页面
}
5 网页刷新
在UIWebView有下列属性和方法。
- 、@property (nonatomic, readonly, getter=isLoading) BOOL loading、:是否正在刷新界面
- (void)reload
:刷新- (void)stopLoading
:停止刷新
在AdvancedVC添加如下代码
#pragma mark 刷新
- (IBAction)reload:(id)sender {
NSLog(@"%d", self.webView.loading);
// 正在刷新界面时,停止刷新后重新刷新界面
if (self.webView.loading) {
[self.webView stopLoading]; // 停止刷新
}
[self.webView reload]; // 刷新界面
}
将界面的按钮指向这个方法,运行代码,点击按钮则能看见刷新效果。
6 网页上一页和下一页
在UIWebView有下列方法:
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack
:能否去上一页;@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward
:能否去下一页;- (void)goBack
:去上一页;- (void)goForward
:去下一页。
在AdvancedVC添加如下代码
#pragma mark 去上一页
- (IBAction)goBack:(id)sender {
// 可以去上一页时,执行去上一页操作
if (self.webView.canGoBack) {
[self.webView goBack];
}
}
#pragma mark 去下一页
- (IBAction)goForward:(id)sender {
// 可以去下一页时,执行去下一页操作
if (self.webView.canGoForward) {
[self.webView goForward];
}
}
将界面上方右边的两个按钮指向这两个方法体,运行项目,则能实现网页前往上一页或下一页。
7 进度条
7.1 QQ进度条分析
打开qq的网页浏览,发现在UINavigationController有一个很炫的进度条,初步分析使用的是UIProgressView控件,这里我们也使用这种控件,只要实现进度条的动画效果即可。如果你想实现更炫的效果,请自行研究UIProgressView。
7.2 项目改造
为了实现进度条,需要在界面中加一个UIProgressView控件。
在storyboard拉一个UIProgressView放在view上,并设置相关约束。搭建好后效果如图
然后将控件指向AdvancedVC,并实现UIVWebView的代理,完成后代码如下。
//
// AdvancedVC.m
// UIWebView
//
// Created by yangjun on 15/11/4.
// Copyright © 2015年 六月. All rights reserved.
//
#import "AdvancedVC.h"
@interface AdvancedVC () <UIWebViewDelegate>
{
CGFloat _startLoadingCount; ///< 要加载的链接数
CGFloat _finishLoadingCount; ///< 已加载的链接数
}
@property (weak, nonatomic) IBOutlet UIWebView *webView; ///< UIWebView
@property (weak, nonatomic) IBOutlet UIProgressView *progressView; ///< 进度条
@end
@implementation AdvancedVC
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSLog(@"清除cookies");
NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
for (NSHTTPCookie *cookie in [storage cookies]) {
[storage deleteCookie:cookie];
}
NSLog(@"清除UIWebView的缓存");
[[NSURLCache sharedURLCache] removeAllCachedResponses];
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
self.webView.delegate = self;
[self.webView loadRequest:urlRequest]; // 加载页面
}
#pragma mark 刷新
- (IBAction)reload:(id)sender {
NSLog(@"%d", self.webView.loading);
// 正在刷新界面时,停止刷新后重新刷新界面
if (self.webView.loading) {
[self.webView stopLoading]; // 停止刷新
}
[self.webView reload]; // 刷新界面
}
#pragma mark 去上一页
- (IBAction)goBack:(id)sender {
// 可以去上一页时,执行去上一页操作
if (self.webView.canGoBack) {
[self.webView goBack];
}
}
#pragma mark 去下一页
- (IBAction)goForward:(id)sender {
// 可以去下一页时,执行去下一页操作
if (self.webView.canGoForward) {
[self.webView goForward];
}
}
#pragma mark - UIWebViewDelegate
#pragma mark 开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"%@", NSStringFromSelector(_cmd));
}
#pragma mark 网页加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"%@", NSStringFromSelector(_cmd));
}
#pragma mark 网页加载出错
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error {
NSLog(@"%@:%@", NSStringFromSelector(_cmd), error.localizedDescription);
}
#pragma mark 网页监听
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSLog(@"%@", NSStringFromSelector(_cmd));
NSLog(@"%@", request.URL.absoluteString.stringByRemovingPercentEncoding);
return YES;
}
7.3 进度条实现
运行项目后,我们在浏览器随意操作。发现,有的页面输出信息多,有的页面输出信息少。
对比发现有的页面是请求多个url然后展示,而有的页面只请求一个url页面。
这就给我们实现进度条的机会,我们可以制作一个简单的进度条。由于webViewDidStartLoad
和webViewDidFinishLoad
是一一对应的,而且一个页面是并发的请求webViewDidStartLoad
,然后再一个一个回调webViewDidFinishLoad
。
通过这里你就发现了,只要完成的请求除以发出的请求就是进度条的百分比。
添加两个属性_startLoadingCount和_finishLoadingCount分别记录需加载和完成的请求,然后相除则完美实现进度条。
这里我只展示核心代码:
@interface AdvancedVC () <UIWebViewDelegate>
{
CGFloat _startLoadingCount; ///< 要加载的链接数
CGFloat _finishLoadingCount; ///< 已加载的链接数
}
@property (weak, nonatomic) IBOutlet UIWebView *webView; ///< UIWebView
@property (weak, nonatomic) IBOutlet UIProgressView *progressView; ///< 进度条
@end
#pragma mark 刷新
- (IBAction)reload:(id)sender {
NSLog(@"%d", self.webView.loading);
// 正在刷新界面时,停止刷新后重新刷新界面
if (self.webView.loading) {
[self.webView stopLoading]; // 停止刷新
_startLoadingCount = _finishLoadingCount = 0;
}
[self.webView reload]; // 刷新界面
}
#pragma mark 去上一页
- (IBAction)goBack:(id)sender {
// 可以去上一页时,执行去上一页操作
if (self.webView.canGoBack) {
_startLoadingCount = _finishLoadingCount = 0;
[self.webView goBack];
}
}
#pragma mark 去下一页
- (IBAction)goForward:(id)sender {
// 可以去下一页时,执行去下一页操作
if (self.webView.canGoForward) {
_startLoadingCount = _finishLoadingCount = 0;
[self.webView goForward];
}
}
#pragma mark - UIWebViewDelegate
#pragma mark 开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"%@", NSStringFromSelector(_cmd));
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
_startLoadingCount++;
// 起始设置0.1,让用户感觉在加载
CGFloat progress = _startLoadingCount == 1 ? 0.1 : self.progressView.progress;
[self.progressView setProgress:progress animated:YES];
}
#pragma mark 网页加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"%@", NSStringFromSelector(_cmd));
_finishLoadingCount++;
[self.progressView setProgress:_finishLoadingCount / _startLoadingCount animated:YES];
// 获取document.readyState状态
NSString *readyState = [webView stringByEvaluatingJavaScriptFromString:@"document.readyState"];
BOOL complete = [readyState isEqualToString:@"complete"];
if (complete && _finishLoadingCount == _startLoadingCount) {
NSLog(@"加载完成");
// 还原状态
_startLoadingCount = _finishLoadingCount = 0;
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}
}
运行项目,进度条完美运行,是不是感觉很爽,你也会制作很炫的进度条了。但是这里我们制作的进度条是伪进度条,比较粗糙,虽然用户发现不了,但是我们自己还是知道。在UIWebView高级篇我会为大家介绍精度更高的进度条。
其他
参考资料
文档修改记录
时间 | 描述 |
---|---|
2015-11-04 | 根据Objective-C中的UIWebView API总结。 |
2015-11-04 | 增加关于进度条的实现。 |
2015-11-06 | 增加相关文章的链接 |
2015-12-11 | 更新相关博文链接 |
2015-12-12 | 更新博文名 |