http://www.cnblogs.com/mddblog/p/5281748.html
一、整体介绍
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 一些实用函数
一些常用的属性和变量
@property (nonatomic, assign) id delegate;
设置webView的代理
@property (nonatomic, readonly, retain) UIScrollView *scrollView;
内置的scrollView
@property (nonatomic, readonly, retain) NSURLRequest *request;
URL请求
-(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;
获取是否正在加载数据
-(NSString)stringByEvaluatingJavaScriptFromString:(NSString)script;
通过javaScript操作web数据
@property (nonatomic) BOOL scalesPageToFit;
设置是否缩放到适合屏幕大小
@property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0);
设置某些数据变为链接形式，这个枚举可以设置如电话号，地址，邮箱等转化为链接
@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0);
设置是否使用内联播放器播放视频
@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0);
设置视频是否自动播放
@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0);
设置音频播放是否支持ari play功能
@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0);
设置是否将数据加载如内存后渲染界面
@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0);
设置用户交互模式
加载函数:
- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)stringbaseURL:(nullable NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
UIWebView不仅可以加载HTML页面，还支持pdf、word、txt、各种图片等等的显示。下面以加载mac桌面上的png图片：/Users/FYZ/Desktop/MaiziIcon.png为例
//1.获取url
NSURL *url = [NSURL fileURLWithPath:@"/Users/FYZ/Desktop/MaiziIcon.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执行代码 oc执行js stringByEvaluatingJavaScriptFromString:
[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];
// 获取网页的title
NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
与js交互的实例
很多时候，我们要对网页做一些编辑，比如加载一个网页后，个别原因，我们不想显示新闻的来源，如下图的新闻来源“新华网”，
那我们就可以使用js代码将这个标签去掉，且只留下时间。js代码的编写，根据火狐浏览器查看它的标签名称，然后做处理，如上图，具体代码如下：
- (void)deleteNewsSource {
// 1.去掉页面标题
NSMutableString *str = [NSMutableString string];
// 去掉导航页，如果想把“腾讯新闻”导航栏一并去掉，就打开注释
// [str appendString:@"document.getElementsByClassName('g-header')[0].style.display = 'none';"];
// 来源
[str appendString:@"if(document.getElementsByClassName('g-wrapper-author')[0].innerHTML.indexOf(' ') == -1){document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML}else{document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML.split(' ')[1];}"];
// 执行js代码
[_webView stringByEvaluatingJavaScriptFromString:str];
}
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
如：
这是内容 ，
我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';
这样就能向id为abc的对象插入内容。
代码执行的时机，一般情况下是等待网页加载完成- (void)webViewDidFinishLoad:(UIWebView *)webView里面执行，比较合理，但是有延迟，我们会发现刚开始有来源，然后突然又没有了，即js代码执行有延迟。
- (void)webViewDidStartLoad:(UIWebView *)webView {
// 1.去掉页面来源标签，时间根据需要自己设置，定时器在这里开启具有一定危险性
NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(deleteNewsSource) userInfo:nil repeats:YES];
[ [NSRunLoop mainRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
self.timer = timer;
}
三、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函数，顾名思义加载本地文件，不要用loadRequest来加载本地HTML，另外，加载网页显示属于UI，所以应在主线程里面执行加载网页函数，不过即使在其它线程执行了加载网页函数，也没关系，苹果已做了处理，保证UI在主线程更新。
/// 模拟器调试加载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(已更新)，另外增加了函数reloadFromOrigin和goToBackForwardListItem。
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函数跳到指定页面
执行js代码
/jsStr为要执行的js代码，字符串形式
[webView evaluateJavaScript:jsStr completionHandler:^(iditem, NSError *_Nullable error) {//执行结果回调}];
3 代理协议使用
一共有三个代理协议：
WKNavigationDelegate：最常用，和UIWebViewDelegate功能类似，追踪加载过程，有是否允许加载、开始加载、加载完成、加载失败。下面会对函数做简单的说明，并用数字标出调用的先后次序：1-2-3-4-5
三个是否允许加载函数：
/// 接收到服务器跳转请求之后调用 (服务器端redirect)，不一定调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
/// 3 在收到服务器的响应头，根据response相关信息，决定是否跳转。decisionHandler必须调用，来决定是否跳转，参数WKNavigationActionPolicyCancel取消跳转，WKNavigationActionPolicyAllow允许跳转
- (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;
//6页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
WKScriptMessageHandler：必须实现的函数，是APP与js交互，提供从网页中收消息的回调方法，即js可以调用app的方法
当然需要对webview做一些特殊处理，创建的时候调用initWithFrame:configuration:做一些配置,configuration为WKWebViewConfiguration类型，具体不再详述，代理方法如下：
///message: 收到的脚本信息
.- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
当然，app也可以执行js代码，如下：
///jsStr为要执行的js代码，字符串形式
[webView evaluateJavaScript:jsStr completionHandler:^(iditem, NSError *_Nullable error) {
//执行结果回调
}];
WKUIDelegate：UI界面相关，原生控件支持，三种提示框：输入、确认、警告。首先将web提示框拦截然后再做处理
/// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
/* 输入框，页面中有调用JS的 prompt 方法就会调用该方法 */
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable 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;
四、示例代码
代码可以实现一般网络显示，加载本地文件(pdf、word、txt、图片等等)
搜索框搜索界面，搜索框输入file://则加载本地文件，http://则加载网络内容，如果两者都不是则搜索输入的关键字。
下部网络导航，后退、前进、刷新、用Safari打开链接四个按钮
网友评论