iOS学习笔记14-网络(三)WebView

一、WebView

WebView就是一个内嵌浏览器控件，在iOS中主要有两种WebView：UIWebView和WKWebView，UIWebView是iOS2之后开始使用，WKWebView是在iOS8开始使用，毫无疑问WKWebView将逐步取代笨重的UIWebView。

WKWebView的优点：
  1. WKWebView更多的支持HTML5的特性
  2. WKWebView更快，占用内存可能只有UIWebView的1/3 ~ 1/4
  3. WKWebView高达60fps的滚动刷新率和丰富的内置手势
  4. WKWebView具有Safari相同的JavaScript引擎
  5. WKWebView增加了加载进度属性

尽管讲了这么多WKWebView的优点，但还有很多项目还没有升级到iOS8，UIWebView也还有学习的必要，也可以通过对比WKWebView和UIWebView的使用，加深理解。

注意：Xcode7禁用了明码的HTTP请求（但不限HTTPS请求），应该在info.plist里添加下面的字段，否则无法响应HTTP请求

添加App Transport Security Settings，并在其中设置Allow Arbitrary Loads为YES

二、UIWebView

1. UIWebView加载请求

- (void)simpleUIWebViewTest {
    // 1.创建webview，并设置大小，"20"为状态栏高度
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height - 20;
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, width, height)];
    // 2.创建URL
    NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];
    // 3.创建Request
    NSURLRequest *request =[NSURLRequest requestWithURL:url];
    // 4.加载网页
    [webView loadRequest:request];
    // 5.最后将webView添加到界面
    [self.view addSubview:webView];
    self.webView = webView;
}

2. UIWebView的实用加载函数

//加载网络请求
- (void)loadRequest:(NSURLRequest *)request;

/*
    功能：加载本地HTML字符串
    string为要加载的本地HTML字符串
    baseURL用来确定htmlString的基准地址，相当于HTML的<base>标签的作用，定义页面中所有链接的默认地址
*/
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
/* 加载二进制数据 */
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType
                   characterEncodingName:(NSString *)characterEncodingName
                                 baseURL:(NSURL *)baseURL;
下面是加载HTML字符串的例子
- (void)loadLocalHTMLFileToUIWebView{
    // 获取本地html文件文件路径
    NSString *localHTMLPageName = @"myPage";
    NSString *path = [[NSBundle mainBundle] pathForResource:localHTMLPageName ofType:@"html"];
    // 从html文件中读取html字符串
    NSString *htmlString = [NSString stringWithContentsOfFile:path
                                                     encoding:NSUTF8StringEncoding
                                                        error:NULL];
    // 加载本地HTML字符串
    [self.webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];
}

UIWebView不仅可以加载HTML页面，还支持pdf、word、txt、各种图片等等的显示。使用loadRequest方法加载的URL是pdf、word、txt、各种图片的URL路径，就可以加载对应的文件，这里就不演示了。

3. UIWebView的网页导航方法

我们浏览网页，时常会使用到的刷新网页、前进、后退等导航操作，UIWebView里面也有对应的操作方法。

#pragma mark - 判断属性
// 是否可以后退
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;
// 是否可以向前
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;
// 是否正在加载
@property (nonatomic, readonly, getter=isLoading) BOOL loading;

#pragma mark - 操作方法
// 刷新网页
- (void)reload;
// 停止加载网页
- (void)stopLoading;
// 后退
- (void)goBack;
// 前进
- (void)goForward;

4. UIWebViewDelegate代理方法

一共有四个方法：
//是否允许加载网页，也可获取js要打开的url，通过截取此url可与js交互
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
                                                 navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView;
//网页加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView;
//网页加载错误
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

5. UIWebView和JavaScript交互的方法

主要有两方面：JS执行OC代码、OC调取写好的JS代码

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

6. UIWebView整合功能代码

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self initWebView];
}
- (void)initWebView{
    // 1.创建webview，并设置大小，"20"为状态栏高度
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height - 20;
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,20,width,height)];
    // 2.创建URL
    NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];
    // 3.创建Request
    NSURLRequest *request =[NSURLRequest requestWithURL:url];
    // 4.加载网页
    [webView loadRequest:request];
    // 5.最后将webView添加到界面
    [self.view addSubview:webView];
    self.webView = webView;
    webView.delegate = self;
}
#pragma mark 设置前进后退按钮状态
-(void)setBarButtonStatus{
    if (_webView.canGoBack) {
        _barButtonBack.enabled = YES;
    }else{
        _barButtonBack.enabled = NO;
    }
    if(_webView.canGoForward){
        _barButtonForward.enabled = YES;
    }else{
        _barButtonForward.enabled = NO;
    }
}
/*浏览器后退*/
- (void)clickGoBackBtn{
    if(self.webView.canGoBack){
        [self.webView goBack];
    }
}
/*浏览器前进*/
- (void)clickGoForwardBtn{
    if(self.webView.canGoForward){
        [self.webView goForward];
    }
}
#pragma mark - UIWebViewDelegate代理方法
#pragma mark 开始加载
//是否允许加载网页，也可获取js要打开的url，通过截取此url可与js交互
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
                               navigationType:(UIWebViewNavigationType)navigationType
{
    //截取URL，这里可以和JS进行交互，但这里没有写，因为会涉及到JS的一些知识，增加复杂性
    NSString *urlString = [request.URL absoluteString];
    urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];
    NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);
    return YES;
}
//开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView{
    //显示网络请求加载
    [UIApplication sharedApplication].networkActivityIndicatorVisible = true;
}
//网页加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    //隐藏网络请求加载图标
    [UIApplication sharedApplication].networkActivityIndicatorVisible = false;
    [self setBarButtonStatus];
    //取得html内容
    NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);
}
//网页加载错误
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统提示"
                                                    message:@"网络连接发生错误!"
                                                   delegate:self
                                          cancelButtonTitle:nil
                                          otherButtonTitles:@"确定", nil];
    [alert show];
}

三、WKWebView

终于轮到WKWebView这个以后时代的主角出场了。要使用WKWebView需要导入 框架，你可以明显地从下面看出我对WKWebView和UIWebView的区别对待，O(∩_∩)O哈哈~

1. WKWebView加载请求

和UIWebView用法完全一致：
#pragma mark - WKWebView简单使用
- (void)wkWebViewEasyUse
{
    //1.创建WKWebView
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height - 20;
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0,20,width,height)];
    //2.创建URL
    NSURL *URL = [NSURL URLWithString:@"http://www.baidu.com"];
    //3.创建Request
    NSURLRequest *request = [NSURLRequest requestWithURL:URL];
    //4.加载Request
    [webView loadRequest:request];
    //5.添加到视图
    self.webView = webView;
    [self.view addSubview:webView];
}

2. WKWebView的实用加载方法

UIWebView有的，WKWebView都有，WKWebView多了一个加载文件方法，而且WKWebView的这些加载方法都有返回值。

/*加载请求*/
- (WKNavigation *)loadRequest:(NSURLRequest *)request;
/*加载本地HTML字符串*/
- (WKNavigation *)loadHTMLString:(NSString *)string
                         baseURL:(nullable NSURL *)baseURL;
/*加载本地文件*/
- (WKNavigation *)loadFileURL:(NSURL*)url
      allowingReadAccessToURL:(NSURL*)url;
/* 加载二进制数据 */
- (WKNavigation *)loadData:(NSData *)data
                  MIMEType:(NSString *)MIMEType
     characterEncodingName:(NSString *)characterEncodingName
                   baseURL:(NSURL *)baseURL;
loadHTMLString方法的显示效果会有一些区别，看下图：
我的HTML文件myPage.html如下:
<html>
    <head><title>Kenshin Cui‘s Blog</title></head>
    <body style="color:#0092FF;">
        <h1 id="header">I am Kenshin Cui</h1>
        <p>iOS Learn</p>
    </body>
</html>

估计两种WebView加载HTML的默认字体样式是不一样的，这里只是说一下

下面是加载本地文件的实例：
/* 模拟器调试加载mac本地文件 */
- (void)loadLocalFile {
    // 1.创建webview，并设置大小，"20"为状态栏高度
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height - 20;
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, width, height)];
    // 2.创建url  userName：电脑用户名
    NSURL *url = [NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];
    // 3.加载文件
    [webView loadFileURL:url allowingReadAccessToURL:url];
    // 最后将webView添加到界面
    [self.view addSubview:webView];
}

3. WKWebView的网页导航方法

和UIWebView相差不大，多了返回值，多了一些属性，也多了2个方法：

  • reloadFromOrigin，缓存加载
  • goToBackForwardListItem，跳转到指定历史页面
下面是网页导航方法列表：
@property (nonatomic, readonly) BOOL canGoBack;
@property (nonatomic, readonly) BOOL canGoForward;
@property (nonatomic, readonly, getter=isLoading) BOOL loading;
- (WKNavigation *)goBack;
- (WKNavigation *)goForward;
- (WKNavigation *)reload;
- (void)stopLoading; 

/* 加载进度，取值范围0~1 */
@property (nonatomic, readonly) double estimatedProgress;
/* 是否允许左右划手势导航，默认不允许 */
@property (nonatomic) BOOL allowsBackForwardNavigationGestures;
/* 访问历史列表 */
@property (nonatomic, readonly, strong) WKBackForwardList *backForwardList;
/* 会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求 */
- (WKNavigation *)reloadFromOrigin;
/* 比向前向后更强大，可以跳转到某个指定历史页面 */
- (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item;

4. WKWebView的代理

UIWebView只有一个代理，但WKWebView有好几个，但常用的有2个，
id<WKNavigationDelegate> navigationDelegate和id< WKUIDelegate > UIDelegate：

  • WKNavigationDelegate: 最常用，和UIWebViewDelegate功能类似，追踪加载过程，有是否允许加载、开始加载、加载完成、加载失败。
  • WKUIDelegate：UI界面相关，原生控件支持，三种提示框：输入、确认、警告。
下面列出WKNavigationDelegate的常用代理方法
/* 1.在发送请求之前，决定是否跳转  */
- (void)webView:(WKWebView *)webView
        decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction
                        decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
/* 2.页面开始加载 */
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
/* 3.在收到服务器的响应头，根据response相关信息，决定是否跳转。 */
- (void)webView:(WKWebView *)webView
        decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse
                          decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
/* 4.开始获取到网页内容时返回，需要注入JS，在这里添加 */
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
/* 5.页面加载完成之后调用 */
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
/* error - 页面加载失败时调用 */
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
/* 其他 - 处理服务器重定向Redirect */
- (void)webView:(WKWebView *)webView
        didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;

我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了JS的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在这里调用iOS的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了

下面列出WKUIDelegate的常用代理方法：
/* 输入框，页面中有调用JS的 prompt 方法就会调用该方法 */
- (void)webView:(WKWebView *)webView
        runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt
                                  defaultText:(nullable NSString *)defaultText
                             initiatedByFrame:(WKFrameInfo *)frame
                            completionHandler:(void (^)(NSString *result))completionHandler;
/* 确认框，页面中有调用JS的 confirm 方法就会调用该方法 */
- (void)webView:(WKWebView *)webView
        runJavaScriptConfirmPanelWithMessage:(NSString *)message
                            initiatedByFrame:(WKFrameInfo *)frame
                           completionHandler:(void (^)(BOOL result))completionHandler;
/* 警告框，页面中有调用JS的 alert 方法就会调用该方法 */
- (void)webView:(WKWebView *)webView
        runJavaScriptAlertPanelWithMessage:(NSString *)message
                          initiatedByFrame:(WKFrameInfo *)frame
                         completionHandler:(void (^)(void))completionHandler;

WKWebView还有更多功能，比如和JavaScript互动等，但本人还不太理解，就不写出来忽悠人了。

时间： 2024-11-20 23:51:12

iOS学习笔记14-网络(三)WebView的相关文章

IOS学习笔记 -- 网络编程

一.HTTP协议1.面试题: 聊一下HTTP协议(表达对HTTP协议的看法)* HTTP协议的全称: 超文本传输协议, 定制传输数据的规范(客户端和服务器之间的数据传输规范)* 描述HTTP协议完整的通信过程 2.通信过程1> 请求* 客户端 --> 服务器* 请求的内容a."请求行" : 请求方法\请求资源路径\HTTP协议版本GET /MJServer/login?username=123&pwd=123&method=get&type=JSON

iOS学习笔记---oc语言第三天

继承.初始化方法 一.继承 继承的上层:父类  继承的下层:子类 继承是单向的,不能相互继承 继承具有传递性:A继承于B,B继承于C,A具有B和C的特征和行为 子类能继承父类全部的特征和行为(私有变量也继承过来了,只是不能访问) 面向对象提供了继承语法.能大大简化代码,把公共的方法和实例对象写在父类里.子类只需要写自己独有的实例变量和方法即可 继承既能保证类的完整,又能简化代码 继承特点 oc中只允许单继承 没有父类的类称为根类,oc中得根类是NSObject(祖宗) 继承的内容:所有的实例变量

iOS学习笔记---网络请求

一.HTTP协议的概念 HTTP协议:Hyper Text Transfer Protocol(超文本传输协议)是用于从万维网服务器传送超文本到本地浏览器的传输协议.HTTP是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型(c/s) HTTP协议的特点 支持客户/服务器模式(c/s模式) 简单快速 灵活,HTTP允许任意类型的对象进行传输,正在传输的对象类型由Content-type加以标记 iOS学习笔记---网络请求

iOS学习笔记-精华整理

iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始等待用户的操作,自动释放池就会被释放掉(调用dealloc),池中的对象都会收到一个release,有可能会因此被销毁. 2-成员属性:     readonly:不指定readonly,默认合成getter和setter方法.外界毫不关心的成员,则不要设置任何属性,这样封装能增加代码的独立性和安全

IOS学习笔记---C语言第四天

1 //?生成2个数组,每个数组都有10个元素,元素取值范围20-40之间,数组对应元素相 加,放到另外?一个数组中 2 #import <Foundation/Foundation.h> 3 4 int main(int argc, const char * argv[]) 5 { 6 7 int num1[10]={0},num2[10]={0},num3[10]={0}; 8 for (int i = 0; i<10; i++) { 9 num1[i]=arc4random()%2

黑马程序员--IOS学习笔记--数组及排序

IOS学习笔记 概述: 8_2.改变整型变量的符号 8_2.改变整型变量所占存储空间 8_3.char类型数据存储 8_4.数组的基本概念及分类 8_5.数组元素作为函数参数 8_5.一维数组定义及注意事项 8_6.一维数组初始化 8_7.一维数组一个让人疑惑的问题 8_8.一维数组的引用 8_9.应用:数组遍历 8_10.一维数组的存储方式 8_11.一维数组的地址 8_12.一维数组长度计算方法 8_13.一维数组的越界问题 8_14.应用:找最大值 8_15.数组元素作为函数参数 8_16

APUE学习笔记：第三章 文件I/O

3.1 引言 术语不带缓冲指的是每个read和write都调用内核中的一个系统调用.这些不带缓冲的I/O函数不是ISO C的组成部分,但是,它们是POSIX.1和Single UNIX Specification的组成部分 3.2 文件描述符 UNIX系统shell使用文件描述符0与进程的标准输入相关联.文件描述符1与标准输出相关联.文件描述符2与标准出错输出相关联. 在依从POSIX的应用程序中,幻数0.1.2应当替换成符号常量STDIN_FILENO,STDOUT_FILENO和STDERR

iOS学习笔记---c语言第十天

动态内存分配 一.存储区划分 从低到高(内存地址小----内存地址大)  :  代码区---常量区---静态区---堆区---栈区 栈内存 //凡是在函数体内定义的变量 都存储在栈区(包括形参). int a = 10;//a也是在栈区域里面 float b = 1.5;//b也是在栈区域里面 char c = 'b'; double d = 3.14; printf("%p %p %p %p\n",&a,&b,&c,&d); //栈的特点先进后出,先定

iOS学习笔记22-推送通知

一.推送通知 推送通知就是向用户推送一条信息来通知用户某件事件,可以在应用退到后台后,或者关闭后,能够通过推送一条消息通知用户某件事情,比如版本更新等等. 推送通知的常用应用场景: 一些任务管理APP,会到任务时间即将到达时,通知你该做任务了. 健身APP定时提醒你应该健身了. 买过电影票,提前半个小时通知你,电影即将开场. 当你QQ或微信收到信息时,即使退到后台,也可以收到信息通知你. 电商APP,推送一条消息通知我们有新品上架等等. 推送通知的常用展示样式: 屏幕顶部显示一块横幅 在锁屏界面