赞
踩
转自:http://www.jianshu.com/p/556c988e2707
UIWebView
自iOS2就有,WKWebView
从iOS8才有,毫无疑问WKWebView
将逐步取代笨重的UIWebView
。通过简单的测试即可发现UIWebView
占用过多内存,且内存峰值更是夸张。WKWebView
网页加载速度也有提升,但是并不像内存那样提升那么多。下面列举一些其它的优势:
estimatedProgress
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];
- }
- - (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 = [NSURL fileURLWithPath:@"/Users/coohua/Desktop/bigIcon.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;
一共有四个方法
- /// 是否允许加载网页,也可获取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]);
-
- }
主要有两方面:js执行OC代码、oc调取写好的js代码
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
函数。- // 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出),实现自动定位代码,应该在网页加载完成之后再调用
- NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
- // webview执行代码
- [self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];
-
- // 获取网页的title
- NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]
很多时候,我们要对网页做一些编辑,比如加载一个网页后,个别原因,我们不想显示新闻的来源,如下图的新闻来源“新华网”,网页的链接如下:http://op.inews.qq.com/mcms/h5/default/detail?id=NEW2016103101306200&refer=100000050
(可能已经失效)
那我们就可以使用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];
- }
代码执行的时机,一般情况下是等待网页加载完成- (void)webViewDidFinishLoad:(UIWebView *)webView
里面执行,比较合理,但是有延迟,我们会发现刚开始有来源,然后突然又没有了,即js代码执行有延迟。
这样的话,我们可以在- (void)webViewDidStartLoad:(UIWebView *)webView
网页开始加载里面开启一个定时器,比如定时0.2秒(根据需要自己设定),在定时器里面不停的调用- (void)deleteNewsSource
方法即可解决。然后在- (void)webViewDidFinishLoad:(UIWebView *)webView
里面关掉定时器。另外定时器容易引起循环引用,一定要注意释放。比如可以在viewDidDisappear方法里释放定时器。。。
- - (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;
- }
与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];
- }
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;
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;
一共有三个代理协议:
三个是否允许加载函数:
- /// 接收到服务器跳转请求之后调用 (服务器端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;
- /// message: 收到的脚本信息.
- - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
- /// 创建一个新的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;
- /// 确认框
- - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
- /// 警告框
- - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
file://
则加载本地文件,http://
则加载网络内容,如果两者都不是则搜索输入的关键字。- /// 控件高度
- #define kSearchBarH 44
- #define kBottomViewH 44
-
- /// 屏幕大小尺寸
- #define kScreenWidth [UIScreen mainScreen].bounds.size.width
- #define kScreenHeight [UIScreen mainScreen].bounds.size.height
-
- #import "ViewController.h"
- #import <WebKit/WebKit.h>
-
-
- @interface ViewController () <UISearchBarDelegate, WKNavigationDelegate>
-
- @property (nonatomic, strong) UISearchBar *searchBar;
- /// 网页控制导航栏
- @property (weak, nonatomic) UIView *bottomView;
-
- @property (nonatomic, strong) WKWebView *wkWebView;
-
- @property (weak, nonatomic) UIButton *backBtn;
- @property (weak, nonatomic) UIButton *forwardBtn;
- @property (weak, nonatomic) UIButton *reloadBtn;
- @property (weak, nonatomic) UIButton *browserBtn;
-
- @property (weak, nonatomic) NSString *baseURLString;
-
- @end
-
- @implementation ViewController
-
- - (void)viewDidLoad {
- [super viewDidLoad];
- // [self simpleExampleTest];
-
- [self addSubViews];
- [self refreshBottomButtonState];
-
- [self.wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]]];
-
- }
- - (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 loadFileURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"] allowingReadAccessToURL:[NSURL fileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"]];
- // 最后将webView添加到界面
- [self.view addSubview:webView];
- }
- /// 模拟器加载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];
- }
- - (void)addSubViews {
- [self addBottomViewButtons];
-
- [self.view addSubview:self.searchBar];
-
- [self.view addSubview:self.wkWebView];
- }
-
- - (void)addBottomViewButtons {
- // 记录按钮个数
- int count = 0;
- // 添加按钮
- UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
- [button setTitle:@"后退" forState:UIControlStateNormal];
- [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
- [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
- button.tag = ++count; // 标记按钮
- [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
- [self.bottomView addSubview:button];
- self.backBtn = button;
-
- button = [UIButton buttonWithType:UIButtonTypeCustom];
- [button setTitle:@"前进" forState:UIControlStateNormal];
- [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
- [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
- button.tag = ++count;
- [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
- [self.bottomView addSubview:button];
- self.forwardBtn = button;
-
- button = [UIButton buttonWithType:UIButtonTypeCustom];
- [button setTitle:@"重新加载" forState:UIControlStateNormal];
- [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
- [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
- button.tag = ++count;
- [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
- [self.bottomView addSubview:button];
- self.reloadBtn = button;
-
- button = [UIButton buttonWithType:UIButtonTypeCustom];
- [button setTitle:@"Safari" forState:UIControlStateNormal];
- [button setTitleColor:[UIColor colorWithRed:249 / 255.0 green:102 / 255.0 blue:129 / 255.0 alpha:1.0] forState:UIControlStateNormal];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateHighlighted];
- [button setTitleColor:[UIColor lightGrayColor] forState:UIControlStateDisabled];
- [button.titleLabel setFont:[UIFont systemFontOfSize:15]];
- button.tag = ++count;
- [button addTarget:self action:@selector(onBottomButtonsClicled:) forControlEvents:UIControlEventTouchUpInside];
- [self.bottomView addSubview:button];
- self.browserBtn = button;
- // 统一设置frame
- [self setupBottomViewLayout];
- }
- - (void)setupBottomViewLayout
- {
- int count = 4;
- CGFloat btnW = 80;
- CGFloat btnH = 30;
-
- CGFloat btnY = (self.bottomView.bounds.size.height - btnH) / 2;
- // 按钮间间隙
- CGFloat margin = (self.bottomView.bounds.size.width - btnW * count) / count;
-
- CGFloat btnX = margin * 0.5;
- self.backBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
-
- btnX = self.backBtn.frame.origin.x + btnW + margin;
- self.forwardBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
-
- btnX = self.forwardBtn.frame.origin.x + btnW + margin;
- self.reloadBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
-
- btnX = self.reloadBtn.frame.origin.x + btnW + margin;
- self.browserBtn.frame = CGRectMake(btnX, btnY, btnW, btnH);
- }
- /// 刷新按钮是否允许点击
- - (void)refreshBottomButtonState {
- if ([self.wkWebView canGoBack]) {
- self.backBtn.enabled = YES;
- } else {
- self.backBtn.enabled = NO;
- }
-
- if ([self.wkWebView canGoForward]) {
- self.forwardBtn.enabled = YES;
- } else {
- self.forwardBtn.enabled = NO;
- }
- }
- /// 按钮点击事件
- - (void)onBottomButtonsClicled:(UIButton *)sender {
- switch (sender.tag) {
- case 1:
- {
- [self.wkWebView goBack];
- [self refreshBottomButtonState];
- }
- break;
- case 2:
- {
- [self.wkWebView goForward];
- [self refreshBottomButtonState];
- }
- break;
- case 3:
- [self.wkWebView reload];
- break;
- case 4:
- [[UIApplication sharedApplication] openURL:self.wkWebView.URL];
- break;
- default:
- break;
- }
- }
-
- #pragma mark - WKWebView WKNavigationDelegate 相关
- /// 是否允许加载网页 在发送请求之前,决定是否跳转
- - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
-
- NSString *urlString = [[navigationAction.request URL] absoluteString];
-
- urlString = [urlString stringByRemovingPercentEncoding];
- // NSLog(@"urlString=%@",urlString);
- // 用://截取字符串
- NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];
- if ([urlComps count]) {
- // 获取协议头
- NSString *protocolHead = [urlComps objectAtIndex:0];
- NSLog(@"protocolHead=%@",protocolHead);
- }
- decisionHandler(WKNavigationActionPolicyAllow);
- }
-
-
- #pragma mark - searchBar代理方法
- /// 点击搜索按钮
- - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar {
- // 创建url
- NSURL *url = nil;
- NSString *urlStr = searchBar.text;
-
- // 如果file://则为打开bundle本地文件,http则为网站,否则只是一般搜索关键字
- if([urlStr hasPrefix:@"file://"]){
- NSRange range = [urlStr rangeOfString:@"file://"];
- NSString *fileName = [urlStr substringFromIndex:range.length];
- url = [[NSBundle mainBundle] URLForResource:fileName withExtension:nil];
- // 如果是模拟器加载电脑上的文件,则用下面的代码
- // url = [NSURL fileURLWithPath:fileName];
- }else if(urlStr.length>0){
- if ([urlStr hasPrefix:@"http://"]) {
- url=[NSURL URLWithString:urlStr];
- } else {
- urlStr=[NSString stringWithFormat:@"http://www.baidu.com/s?wd=%@",urlStr];
- }
- urlStr = [urlStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
- url=[NSURL URLWithString:urlStr];
-
- }
- NSURLRequest *request=[NSURLRequest requestWithURL:url];
-
- // 加载请求页面
- [self.wkWebView loadRequest:request];
- }
- #pragma mark - 懒加载
- - (UIView *)bottomView {
- if (_bottomView == nil) {
- UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, kScreenHeight - kBottomViewH, kScreenWidth, kBottomViewH)];
- view.backgroundColor = [UIColor colorWithRed:230/255.0 green:230/255.0 blue:230/255.0 alpha:1];
- [self.view addSubview:view];
- _bottomView = view;
- }
- return _bottomView;
- }
- - (UISearchBar *)searchBar {
- if (_searchBar == nil) {
- UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, kSearchBarH)];
- searchBar.delegate = self;
- searchBar.text = @"http://www.cnblogs.com/mddblog/";
- _searchBar = searchBar;
-
- }
- return _searchBar;
- }
-
- - (WKWebView *)wkWebView {
- if (_wkWebView == nil) {
- WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20 + kSearchBarH, kScreenWidth, kScreenHeight - 20 - kSearchBarH - kBottomViewH)];
- webView.navigationDelegate = self;
- // webView.scrollView.scrollEnabled = NO;
-
- // webView.backgroundColor = [UIColor colorWithPatternImage:self.image];
- // 允许左右划手势导航,默认允许
- webView.allowsBackForwardNavigationGestures = YES;
- _wkWebView = webView;
- }
-
- return _wkWebView;
- }
-
-
- @end
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。