WKWebView替换WebView体会总结

Posted 2022-12-09 漂泊_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WKWebView替换WebView体会总结相关的知识，希望对你有一定的参考价值。

一.引言

最近应公司要求，把项目里用到的UIWebView全都用WKWebView替换掉。于是就去研究了WKWebview,加上在使用中遇到的一些问题加以总结，如有不足之处，还望指出，本人将会加以修改。

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

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

缺点： WKWebView 不支持缓存和 NSURLProtocol 拦截了

二、UIWebView使用说明

1 举例：简单的使用

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

// 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 =[NSMutableURLRequestrequestWithURL:[NSURLURLWithString:@"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.获取url

NSURL *url = [NSURLfileURLWithPath:@"/Users/coohua/Desktop/bigIcon.png"];

// 2.创建请求

NSURLRequest *request=[NSURLRequestrequestWithURL: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);

returnYES;

///开始加载网页

- (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交互

///加载完成时调用

- (void)webViewDidFinishLoad:(UIWebView *)webView

[self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];

[self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];

[self.showView removeFromSuperview];

NSString *jsToGetHTMLSource = @"document.getElementsByTagName('html')[0].innerHTML";

NSString *HTMLSource = [self.webView stringByEvaluatingJavaScriptFromString:jsToGetHTMLSource];

[self.activityView stopAnimating];

NSRange range = [HTMLSource rangeOfString:@"Bad Gateway"];//判断字符串是否包含

bool urlIsTrue = (range.location == NSNotFound);

if (urlIsTrue ==true )

range = [HTMLSource rangeOfString:@"Network is unreachable"];

urlIsTrue = (range.location == NSNotFound);

if (urlIsTrue ==true )

range = [HTMLSource rangeOfString:@"页面不存在"];

urlIsTrue = (range.location == NSNotFound);

if (urlIsTrue ==true)

range = [HTMLSource rangeOfString:@"网页无法访问"];

urlIsTrue = (range.location == NSNotFound);

if (urlIsTrue ==true)

range = [HTMLSource rangeOfString:@"Not Found"];

urlIsTrue = (range.location == NSNotFound);

//网页可访问隐藏我们自己的返回按钮

if (urlIsTrue==true)

self.topView.hidden =YES;

else

[webView stopLoading];

[self addShowView];

三、WKWebView使用说明

1 简单使用

与UIWebview一样，仅需三步:记住导入（#import <WebKit/WebKit.h>）

- (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(已更新)，另外增加了函数 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函数跳到指定页面

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;

/// 页面加载失败时调用

- (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

NSLog(@"%s",__FUNCTION__);

NSLog(@"%@", prompt);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"textinput" message:@"JS调用输入框" preferredStyle:UIAlertControllerStyleAlert];

[alert addTextFieldWithConfigurationHandler:^(UITextField *_Nonnull textField)

textField.textColor = [UIColor redColor];

];

[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action)

completionHandler([[alert.textFields lastObject] text]);

]];

[self presentViewController:alert animated:YES completion:NULL];

/// 确认框

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^）(BOOL result))completionHandler

NSLog(@"%s", __FUNCTION__);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"confirm" message:@"JS调用confirm"preferredStyle:UIAlertControllerStyleAlert];

[alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action)

completionHandler(YES);

]];

[alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action)

completionHandler(NO);

]];

[self presentViewController:alert animated:YES completion:NULL];

NSLog(@"%@", message);

/// 警告框

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler

NSLog(@"%s", __FUNCTION__);

UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"alert"message:@"JS调用alert" preferredStyle:UIAlertControllerStyleAlert];

[alert addAction:[UIAlertAction actionWithTitle:@"确定以上是关于WKWebView替换WebView体会总结的主要内容，如果未能解决你的问题，请参考以下文章

IOS 进阶之 WKWebView

iOS 端容器之 WKWebView 那些事

WKWebView简单使用

wkwebview 代理介绍

ios wkwebview返回原生调用啥方法