关于WebView/WKWebView的简单介绍
2016-09-06 本文已影响216人
程序猿界的cai渣渣
关于WebView的使用下面作以下介绍：WebView用来加载网页，实现App与PC的结合使用。
1.初始化WebView
第一种：
//直接加载网页
webView = [[UIWebView alloc] initWithFrame:@“可以自己设置frame”];
NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
[self.view addSubview: webView];
[webView loadRequest:request];
2.加载html类型的字符串等
第二种：
//这个方法需要将httml文件读取为字符串，其中baseURL是我们自己设置的一个路径，用于寻找html文件中引用的图片等素材。
-(void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
第三种：
//这个方式使用的比较少，但也更加自由，其中data是文件数据，MIMEType是文件类型，textEncodingName是编码类型，baseURL是素材资源路径。
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
3.如何获取WebView所有的图片地址（在网页加载完成时，通过js获取图片和添加点击的识别方式）
//UIWebView
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//这里是js，主要目的实现对url的获取
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";
[webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
//urlResurlt 就是获取到得所有图片的url的拼接；mUrlArray就是所有Url的数组
NSString *urlResult = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
NSArray *urlArray = [NSMutableArray arrayWithArray:[urlResult componentsSeparatedByString:@"+"]];
}
//WKWebView
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
};\
return imgScr;\
};";
[webView evaluateJavaScript:jsGetImages completionHandler:nil];
[webView evaluateJavaScript:@"getImages()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@",result);
}];
}
4.获取到web view的高度
CGFloat height = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"] floatValue];
5.WebView的代理
1、- (void)webViewDidStartLoad:(UIWebView *)webView;开始加载的时候执行该方法。
2、- (void)webViewDidFinishLoad:(UIWebView *)webView;加载完成的时候执行该方法。
3、- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;加载出错的时候执行该方法。
//界面请求错误给予提示
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
UIAlertView *alterview = [[UIAlertView alloc] initWithTitle:@"" message:[error localizedDescription] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
[alterview show];
[alterview release];
}
//用户在等待加载时候，一开始加载webView
- (void) webViewDidStartLoad:(UIWebView *)webView {
//创建UIActivityIndicatorView背底半透明View
UIView *view = [[UIView alloc] initWithFrame:@“可以自己设置frame];
[view setTag:108];
[view setBackgroundColor:[UIColor blackColor]];
[view setAlpha:0.5];
[self.view addSubview:view];
//菊花（开发者也可以加载HUD）
activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 32.0f, 32.0f)];
[activityIndicator setCenter:view.center];
[activityIndicator setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];
[view addSubview:activityIndicator];
[activityIndicator startAnimating];
｝
//加载失败或者完成时候，去掉loading效果
- (void) webViewDidFinishLoad:(UIWebView *)webView {
[activityIndicator stopAnimating];
UIView *view = (UIView*)[self.view viewWithTag:108];
[view removeFromSuperview];
NSLog(@"webViewDidFinishLoad");
}
- (void) webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
[activityIndicator stopAnimating];
UIView *view = (UIView*)[self.view viewWithTag:108];
[view removeFromSuperview];
}
6.一些常用的属性和变量
//设置webView的代理
@property (nonatomic,assign)id <UIWebViewDelegate> delegate;
//内置的scrollView
@property (nonatomic,readonly,retain)UIScrollView *scrollView;
//URL请求
@property (nonatomic,readonly,retain)NSURLRequest *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;
//通过javaScript操作web数据
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
//设置是否缩放到适合屏幕大小
@property (nonatomic)BOOL scalesPageToFit;
//设置某些数据变为链接形式，这个枚举可以设置如电话号，地址，邮箱等转化为链接
@property (nonatomic)UIDataDetectorTypes dataDetectorTypesNS_AVAILABLE_IOS(3_0);
//设置是否使用内联播放器播放视频
@property (nonatomic)BOOL allowsInlineMediaPlaybackNS_AVAILABLE_IOS(4_0);
//设置视频是否自动播放
@property (nonatomic)BOOL mediaPlaybackRequiresUserActionNS_AVAILABLE_IOS(4_0);
//设置音频播放是否支持ari play功能
@property (nonatomic)BOOL mediaPlaybackAllowsAirPlayNS_AVAILABLE_IOS(5_0);
//设置是否将数据加载如内存后渲染界面
@property (nonatomic)BOOL suppressesIncrementalRenderingNS_AVAILABLE_IOS(6_0);
//设置用户交互模式
@property (nonatomic)BOOL keyboardDisplayRequiresUserActionNS_AVAILABLE_IOS(6_0);
@property (nonatomic)UIWebPaginationMode paginationModeNS_AVAILABLE_IOS(7_0);
typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
//不使用翻页效果
UIWebPaginationModeUnpaginated,
//将网页超出部分分页，从左向右进行翻页
UIWebPaginationModeLeftToRight,
//将网页超出部分分页，从上向下进行翻页
UIWebPaginationModeTopToBottom,
//将网页超出部分分页，从下向上进行翻页
UIWebPaginationModeBottomToTop,
//将网页超出部分分页，从右向左进行翻页
UIWebPaginationModeRightToLeft
};
//这个属性用来设置一种模式，当网页的大小超出view时，将网页以翻页的效果展示，枚举如下：
//设置每一页的长度
@property (nonatomic)CGFloat pageLengthNS_AVAILABLE_IOS(7_0);
//设置每一页的间距
@property (nonatomic)CGFloat gapBetweenPagesNS_AVAILABLE_IOS(7_0);
//获取分页数
@property (nonatomic,readonly)NSUInteger pageCountNS_AVAILABLE_IOS(7_0);
接下来时WKWebView的简单介绍：
WKWebView是在8.0之后才出现的，算是WebView的升级版，
其特点如下：
• 性能高，稳定性好，占用的内存比较小（占用内存可能只有 UIWebView 的1/3~1/4），
• 支持JS交互
• 支持HTML5 新特性
• 可以添加进度条。
• 支持内建手势，
• 不支持缓存，
• 据说高达60fps的刷新频率（不卡）
使用时需要注意的几个地方：
1.http与https的设置；
2.是否导入框架；
3. webview.delegate = self 需要改写为 webview.navigationDelegate = self
1.WKWebView的加载与WebView是相同的。在使用时候需要导入<WebKit/WebKit.h>
2.遵守协议
（一般前两个就行啦，第三个主要是与JS相关的东西，这个协议中包含一个必须实现的方法，这个方法是提高App与web端交互的关键，它可以直接将接收到的JS脚本转为OC或Swift对象—网上大神说的，我没用过。）以下是三个代理。
WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler
3. WKWebView的初始化方法
//第一种（自适应字体大小）
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
WKWebView *myWebView = [[WKWebView alloc] initWithFrame:@"自定义frame" configuration:wkWebConfig];
[self.view addSubview:wkWebview];
//第二种
WKWebView *myWebView = [[WKWebView alloc] initWithFrame:@"自定义frame"];
[self.view addSubview:wkWebview];
下面讲一下代理方法的作用：
1）WKNavigationDelegate来追踪加载过程（跟webView的加载是一样的）
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
2）WKNavigtionDelegate来进行页面跳转
// 接收到服务器跳转请求之后再执行
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在发送请求之前，决定是否跳转
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
3）WKUIDelegate
//1.创建一个新的WebVeiw
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
//2.WebVeiw关闭（9.0中的新方法）
- (void)webViewDidClose:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0);
//3.显示一个JS的Alert（与JS交互）
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
//4.弹出一个输入框（与JS交互的）
-(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler;
//5.显示一个确认框（JS的）
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
4）返回、前进
在加载网络网页时候，经常可以点击网页进入下一级，而当你你需要返回上一级时候，再点击返回按钮，返回的是第一界面，而不是前一界面。举个例子：A->B(B是网络请求)，点击B内容：B->C(C是由加载之后跳转的)，如果想返回B，需要进行判断，判断的是webView的一个属性：-(BOOL)canGoBack，方法实现：- (void)goBack。
//返回上一界面
- (void)goBack;
//进入下一界面（注：浏览过的下一界面）
- (void)goForward;
//属性判断，是否有可返回的界面
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;
//属性判断，是否有浏览过下一界面
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;
