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

来源:互联网 发布:萧山网络问政有用吗 编辑:程序博客网 时间:2024/06/11 00:53

一、整体介绍

UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存,且内存峰值更是夸张。WKWebView网页加载速度也有提升,但是并不像内存那样提升那么多。下面列举一些其它的优势: 

  • 更多的支持HTML5的特性
  • 官方宣称的高达60fps的滚动刷新率以及内置手势
  • Safari相同的JavaScript引擎
  • 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)
  • 另外用的比较多的,增加加载进度属性:estimatedProgress

二、UIWebView使用说明

1 举例:简单的使用

UIWebView使用非常简单,可以分为三步,也是最简单的用法,显示网页

复制代码
- (void)simpleExampleTest {    // 1.创建webview,并设置大小,"20"为状态栏高度    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];    // 2.创建请求    NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];    // 3.加载网页    [webView loadRequest:request];        // 最后将webView添加到界面    [self.view addSubview:webView];}
复制代码

2 一些实用函数

  • 加载函数。
- (void)loadRequest:(NSURLRequest *)request;- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

UIWebView不仅可以加载HTML页面,还支持pdf、word、txt、各种图片等等的显示。下面以加载mac桌面上的png图片:/Users/coohua/Desktop/bigIcon.png为例 

// 1.获取urlNSURL *url = [NSURL fileURLWithPath:@"/Users/coohua/Desktop/bigIcon.png"];// 2.创建请求NSURLRequest *request=[NSURLRequest requestWithURL:url];// 3.加载请求[self.webView loadRequest:request];
  • 网页导航刷新有关函数
复制代码
// 刷新- (void)reload;// 停止加载- (void)stopLoading;// 后退函数- (void)goBack;// 前进函数- (void)goForward;// 是否可以后退@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;// 是否可以向前@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;// 是否正在加载@property (nonatomic, readonly, getter=isLoading) BOOL loading;
复制代码

3 代理协议使用:UIWebViewDelegate

一共有四个方法

复制代码
/// 是否允许加载网页,也可获取js要打开的url,通过截取此url可与js交互- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {        NSString *urlString = [[request URL] absoluteString];    urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];        NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];    NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);    return YES;}/// 开始加载网页- (void)webViewDidStartLoad:(UIWebView *)webView {    NSURLRequest *request = webView.request;    NSLog(@"webViewDidStartLoad-url=%@--%@",[request URL],[request HTTPBody]);}/// 网页加载完成- (void)webViewDidFinishLoad:(UIWebView *)webView {    NSURLRequest *request = webView.request;    NSURL *url = [request URL];    if ([url.path isEqualToString:@"/normal.html"]) {        NSLog(@"isEqualToString");    }    NSLog(@"webViewDidFinishLoad-url=%@--%@",[request URL],[request HTTPBody]);    NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);}/// 网页加载错误- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {    NSURLRequest *request = webView.request;    NSLog(@"didFailLoadWithError-url=%@--%@",[request URL],[request HTTPBody]);    }
复制代码

4 与js交互

主要有两方面:js执行OC代码、oc调取写好的js代码 

  • js执行OC代码:js是不能执行oc代码的,但是可以变相的执行,js可以将要执行的操作封装到网络请求里面,然后oc拦截这个请求,获取url里面的字符串解析即可,这里用到代理协议的- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType函数。
  • oc调取写好的js代码:这里用到UIwebview的一个方法。示例代码一个是网页定位,一个是获取网页title:
复制代码
// 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出),实现自动定位代码,应该在网页加载完成之后再调用NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];// webview执行代码[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];// 获取网页的titleNSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
复制代码

三、WKWebView使用说明

1 简单使用

与UIWebview一样,仅需三步:

复制代码
- (void)simpleExampleTest {    // 1.创建webview,并设置大小,"20"为状态栏高度    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];    // 2.创建请求    NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];    // 3.加载网页    [webView loadRequest:request];        // 最后将webView添加到界面    [self.view addSubview:webView];}
复制代码

2 一些实用函数

  • 加载网页函数
    相比UIWebview,WKWebView也支持各种文件格式,并新增了loadFileURL函数,顾名思义加载本地文件。
复制代码
/// 模拟器调试加载mac本地文件- (void)loadLocalFile {    // 1.创建webview,并设置大小,"20"为状态栏高度    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];    // 2.创建url  userName:电脑用户名    NSURL *url = [NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];    // 3.加载文件    [webView loadFileURL:url allowingReadAccessToURL:url];    // 最后将webView添加到界面    [self.view addSubview:webView];}/// 其它三个加载函数- (WKNavigation *)loadRequest:(NSURLRequest *)request;- (WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;- (WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;
复制代码
  • 网页导航刷新相关函数
    和UIWebview几乎一样,不同的是有返回值,WKNavigation(已更新),另外增加了函数reloadFromOrigingoToBackForwardListItem
    • reloadFromOrigin会比较网络数据是否有变化,没有变化则使用缓存,否则从新请求。
    • goToBackForwardListItem:比向前向后更强大,可以跳转到某个指定历史页面
复制代码
@property (nonatomic, readonly) BOOL canGoBack;@property (nonatomic, readonly) BOOL canGoForward;- (WKNavigation *)goBack;- (WKNavigation *)goForward;- (WKNavigation *)reload;- (WKNavigation *)reloadFromOrigin; // 增加的函数- (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item; // 增加的函数- (void)stopLoading;
复制代码
  • 一些常用属性
    • allowsBackForwardNavigationGestures:BOOL类型,是否允许左右划手势导航,默认不允许
    • estimatedProgress:加载进度,取值范围0~1
    • title:页面title
    • .scrollView.scrollEnabled:是否允许上下滚动,默认允许
    • backForwardList:WKBackForwardList类型,访问历史列表,可以通过前进后退按钮访问,或者通过goToBackForwardListItem函数跳到指定页面

3 代理协议使用

一共有三个代理协议: 

  • WKNavigationDelegate:最常用,和UIWebViewDelegate功能类似,追踪加载过程,有是否允许加载、开始加载、加载完成、加载失败。下面会对函数做简单的说明,并用数字标出调用的先后次序:1-2-3-4-5

三个是否允许加载函数:

复制代码
/// 接收到服务器跳转请求之后调用 (服务器端redirect),不一定调用- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation; /// 3 在收到服务器的响应头,根据response相关信息,决定是否跳转。- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;/// 1 在发送请求之前,决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler; 
复制代码

追踪加载过程函数:

复制代码
/// 2 页面开始加载- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;/// 4 开始获取到网页内容时返回- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;/// 5 页面加载完成之后调用- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;/// 页面加载失败时调用- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
复制代码
  • WKScriptMessageHandler:必须实现的函数,是APP与js交互,提供从网页中收消息的回调方法
/// message: 收到的脚本信息.- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
  • WKUIDelegate:UI界面相关,原生控件支持,三种提示框:输入、确认、警告。首先将web提示框拦截然后再做处理。
复制代码
/// 创建一个新的WebView- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;/// 输入框- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;/// 确认框- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;/// 警告框- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
复制代码

四、示例代码

  • 代码可以实现一般网络显示,加载本地文件(pdf、word、txt、图片等等)
  • 搜索框搜索界面,搜索框输入file://则加载本地文件,http://则加载网络内容,如果两者都不是则搜索输入的关键字。
  • 下部网络导航,后退、前进、刷新、用Safari打开链接四个按钮

复制代码
/// 控件高度#define kSearchBarH  44#define kBottomViewH 44/// 屏幕大小尺寸#define kScreenWidth  [UIScreen mainScreen].bounds.size.width#define kScreenHeight [UIScreen mainScreen].bounds.size.height#import "ViewController.h"#import <WebKit/WebKit.h>@interface ViewController () <UISearchBarDelegate, WKNavigationDelegate>@property (nonatomic, strong) UISearchBar *searchBar;/// 网页控制导航栏@property (weak, nonatomic) UIView *bottomView;@property (nonatomic, strong) WKWebView *wkWebView;@property (weak, nonatomic) UIButton *backBtn;@property (weak, nonatomic) UIButton *forwardBtn;@property (weak, nonatomic) UIButton *reloadBtn;@property (weak, nonatomic) UIButton *browserBtn;@property (weak, nonatomic) NSString *baseURLString;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];//    [self simpleExampleTest];        [self addSubViews];    [self refreshBottomButtonState];        [self.wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]]];    }- (void)simpleExampleTest {    // 1.创建webview,并设置大小,"20"为状态栏高度    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];    // 2.创建请求    NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];//    // 3.加载网页    [webView loadRequest:request];//    [webView loadFileURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"] allowingReadAccessToURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"]];    // 最后将webView添加到界面    [self.view addSubview:webView];}/// 模拟器加载mac本地文件- (void)loadLocalFile {    // 1.创建webview,并设置大小,"20"为状态栏高度    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];    // 2.创建url  userName:电脑用户名    NSURL *url = [NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];    // 3.加载文件    [webView loadFileURL:url allowingReadAccessToURL:url];    // 最后将webView添加到界面    [self.view addSubview:webView];}- (void)addSubViews {    [self addBottomViewButtons];        [self.view addSubview:self.searchBar];        [self.view addSubview:self.wkWebView];}- (void)addBottomViewButtons {    // 记录按钮个数    int count = 0;    // 添加按钮    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];    [button setTitle:@"后退" forState:UIControlStateNormal];    [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];    [button.titleLabel setFont:[UIFont systemFontOfSize:15]];    button.tag = ++count;    // 标记按钮    [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];    [self.bottomView addSubview:button];    self.backBtn = button;        button = [UIButton buttonWithType:UIButtonTypeCustom];    [button setTitle:@"前进" forState:UIControlStateNormal];    [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];    [button.titleLabel setFont:[UIFont systemFontOfSize:15]];    button.tag = ++count;    [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];    [self.bottomView addSubview:button];    self.forwardBtn = button;        button = [UIButton buttonWithType:UIButtonTypeCustom];    [button setTitle:@"重新加载" forState:UIControlStateNormal];    [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];    [button.titleLabel setFont:[UIFont systemFontOfSize:15]];    button.tag = ++count;    [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];    [self.bottomView addSubview:button];    self.reloadBtn = button;        button = [UIButton buttonWithType:UIButtonTypeCustom];    [button setTitle:@"Safari" forState:UIControlStateNormal];    [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];    [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];    [button.titleLabel setFont:[UIFont systemFontOfSize:15]];    button.tag = ++count;    [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];    [self.bottomView addSubview:button];    self.browserBtn = button;    // 统一设置frame    [self setupBottomViewLayout];}- (void)setupBottomViewLayout{    int count = 4;    CGFloat btnW = 80;    CGFloat btnH = 30;        CGFloat btnY = (self.bottomView.bounds.size.height - btnH) / 2;    // 按钮间间隙    CGFloat margin = (self.bottomView.bounds.size.width - btnW * count) / count;        CGFloat btnX = margin * 0.5;    self.backBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);        btnX = self.backBtn.frame.origin.x + btnW + margin;    self.forwardBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);        btnX = self.forwardBtn.frame.origin.x + btnW + margin;    self.reloadBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);        btnX = self.reloadBtn.frame.origin.x + btnW + margin;    self.browserBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);}/// 刷新按钮是否允许点击- (void)refreshBottomButtonState {    if ([self.wkWebView canGoBack]) {        self.backBtn.enabled = YES;    } else {        self.backBtn.enabled = NO;    }        if ([self.wkWebView canGoForward]) {        self.forwardBtn.enabled = YES;    } else {        self.forwardBtn.enabled = NO;    }}/// 按钮点击事件- (void)onBottomButtonsClicled:(UIButton *)sender {    switch (sender.tag) {        case 1:        {            [self.wkWebView goBack];            [self refreshBottomButtonState];        }            break;        case 2:        {            [self.wkWebView goForward];            [self refreshBottomButtonState];        }            break;        case 3:            [self.wkWebView reload];            break;        case 4:            [[UIApplication sharedApplication] openURL:self.wkWebView.URL];            break;        default:            break;    }}#pragma mark - WKWebView WKNavigationDelegate 相关/// 是否允许加载网页 在发送请求之前,决定是否跳转- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {        NSString *urlString = [[navigationAction.request URL] absoluteString];        urlString = [urlString stringByRemovingPercentEncoding];    //    NSLog(@"urlString=%@",urlString);    // 用://截取字符串    NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];    if ([urlComps count]) {        // 获取协议头        NSString *protocolHead = [urlComps objectAtIndex:0];        NSLog(@"protocolHead=%@",protocolHead);    }    decisionHandler(WKNavigationActionPolicyAllow);}#pragma mark - searchBar代理方法/// 点击搜索按钮- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {    // 创建url    NSURL *url = nil;    NSString *urlStr = searchBar.text;        // 如果file://则为打开bundle本地文件,http则为网站,否则只是一般搜索关键字    if([urlStr hasPrefix:@"file://"]){        NSRange range = [urlStr rangeOfString:@"file://"];        NSString *fileName = [urlStr substringFromIndex:range.length];        url = [[NSBundle mainBundle] URLForResource:fileName withExtension:nil];        // 如果是模拟器加载电脑上的文件,则用下面的代码//        url = [NSURL fileURLWithPath:fileName];    }else if(urlStr.length>0){        if ([urlStr hasPrefix:@"http://"]) {            url=[NSURL URLWithString:urlStr];        } else {            urlStr=[NSString stringWithFormat:@"http://www.baidu.com/s?wd=%@",urlStr];        }        urlStr = [urlStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];        url=[NSURL URLWithString:urlStr];            }    NSURLRequest *request=[NSURLRequest requestWithURL:url];        // 加载请求页面    [self.wkWebView loadRequest:request];}#pragma mark - 懒加载- (UIView *)bottomView {    if (_bottomView == nil) {        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, kScreenHeight - kBottomViewH, kScreenWidth, kBottomViewH)];        view.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1];        [self.view addSubview:view];        _bottomView = view;    }    return _bottomView;}- (UISearchBar *)searchBar {    if (_searchBar == nil) {        UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kSearchBarH)];        searchBar.delegate = self;        searchBar.text = @"http://www.cnblogs.com/mddblog/";        _searchBar = searchBar;            }    return _searchBar;}- (WKWebView *)wkWebView {    if (_wkWebView == nil) {        WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20 + kSearchBarH, kScreenWidth, kScreenHeight - 20 - kSearchBarH - kBottomViewH)];        webView.navigationDelegate = self;//                webView.scrollView.scrollEnabled = NO;                //        webView.backgroundColor = [UIColor colorWithPatternImage:self.image];        // 允许左右划手势导航,默认允许        webView.allowsBackForwardNavigationGestures = YES;        _wkWebView = webView;    }    return _wkWebView;}@end
复制代码

五、github代码下载

UIWebView下载

WKWebView下载

 

0 0
原创粉丝点击