一、WebView

WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebViewWKWebView,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 LoadsYES

二、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> navigationDelegateid< 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的alertconfirmprompt方法,我们应该实现下面这几个代理方法,然后在这里调用iOS的弹出窗,因为使用WKWebView后,HTML中的alertconfirmprompt方法调用是不会再弹出窗口了

下面列出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互动等,但本人还不太理解,就不写出来忽悠人了。

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

  1. Android 学习笔记之网络通信基础+WebView....

    PS:加快学习进度...下周一完成Android网络通信...然后正式进入实战... 学习内容: 1.Android中Http基础... 2.Android中的Socket基础... 3.Androi ...

  2. 孙鑫MFC学习笔记14:网络编程

    1.OSI 2.TCP/IP与OSI对应关系 3.Socket 4.客户机/服务器模式 5.Windows Sockets 6.套接字类型 7.面向连接的socket编程 8.面向无连接的socket ...

  3. iOS学习笔记-精华整理

    iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...

  4. iOS学习笔记总结整理

    来源:http://mobile.51cto.com/iphone-386851_all.htm 学习IOS开发这对于一个初学者来说,是一件非常挠头的事情.其实学习IOS开发无外乎平时的积累与总结.下 ...

  5. IOS学习笔记06---C语言函数

    IOS学习笔记06---C语言函数 --------------------------------------------  qq交流群:创梦技术交流群:251572072              ...

  6. IOS学习笔记48--一些常见的IOS知识点+面试题

      IOS学习笔记48--一些常见的IOS知识点+面试题   1.堆和栈什么区别? 答:管理方式:对于栈来讲,是由编译器自动管理,无需我们手工控制:对于堆来说,释放工作由程序员控制,容易产生memor ...

  7. iOS学习笔记22-推送通知

    一.推送通知 推送通知就是向用户推送一条信息来通知用户某件事件,可以在应用退到后台后,或者关闭后,能够通过推送一条消息通知用户某件事情,比如版本更新等等. 推送通知的常用应用场景: 一些任务管理APP ...

  8. iOS学习笔记13-网络(二)NSURLSession

    在2013年WWDC上苹果揭开了NSURLSession的面纱,将它作为NSURLConnection的继任者.现在使用最广泛的第三方网络框架:AFNetworking.SDWebImage等等都使用 ...

  9. iOS学习笔记——AutoLayout的约束

    iOS学习笔记——AutoLayout约束 之前在开发iOS app时一直以为苹果的布局是绝对布局,在IB中拖拉控件运行或者直接使用代码去调整控件都会发上一些不尽人意的结果,后来发现iOS在引入了Au ...

随机推荐

  1. java.lang.ClassCastException android.widget.RelativeLayout LayoutParams 异常

    1.在xml布局文件如下所示: <RelativeLayout android:layout_width="match_parent" android:layout_heig ...

  2. linux 删除文件后空间没有释放的解决办法

    清空没用的文件,当我删除文件后,发现可用空间沒有变化 os:centos4.7 现象: 发现当前磁盘空间使用情况: [root@ticketb ~]# df -hFilesystem          ...

  3. Azure 8 月新公布

    Azure 8 月新发布:Cosmos DB 每分钟请求单位,存储的托管磁盘及促销,高级和标准磁盘存储大尺寸磁盘,高级磁盘存储小尺寸磁盘. Azure Cosmos DB:每分钟请求单位为您降低成本, ...

  4. Maven常见知识介绍

    1)pom详解 2)pom详解 3)测试 4)插件与生命周期 5)maven生命周期 6)范围依赖

  5. CodeForces 149D Coloring Brackets (区间DP)

    题意: 给一个合法的括号序列,仅含()这两种.现在要为每对括号中的其中一个括号上色,有两种可选:蓝or红.要求不能有两个同颜色的括号相邻,问有多少种染色的方法? 思路: 这题的模拟成分比较多吧?两种颜 ...

  6. POJ 2152 Fire (树形DP,经典)

    题意:给定一棵n个节点的树,要在某些点上建设消防站,使得所有点都能够通过某个消防站解决消防问题,但是每个点的建站费用不同,能够保证该点安全的消防站的距离上限也不同.给定每个点的建站费用以及最远的消防站 ...

  7. (三)SpringMVC之常用注解

    SpringMVC的常用注解 注解 说明 @Controller 用于说明这个类是一个控制器 @RequestMapping 用于注释一个控制器类或者控制器类的方法 @RequestParam 用于将 ...

  8. idea 发布和本地测试问题

    1.maven本地打包成jar 提示[错误: 找不到或无法加载主类]修改 配置maven ---->Runner---->VM Optins [-DarchetypeCatalog=loc ...

  9. 欧拉函数求在1-n-1与n互质的个数

    long long phi(long long x) { long long res=x,a=x,i; ;i*i<=a;i++) { ) { res=res/i*(i-); ) a=a/i; } ...

  10. 手把手教你写 Vue UI 组件库

    最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好. 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox  ...