IOS WebView控件详解

概述

WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebView和WKWebView,UIWebView是iOS2之后开始使用,WKWebView是在iOS8开始使用,WKWebView将逐步取代笨重的UIWebView。

相比UIWebView,WKWebView做了如下优化:

  1. WKWebView更多的支持HTML5的特性
  2. WKWebView更快,占用内存可能只有UIWebView的1/3 ~ 1/4
  3. WKWebView高达60fps的滚动刷新率和丰富的内置手势
  4. WKWebView具有Safari相同的JavaScript引擎
  5. WKWebView增加了加载进度属性

UIWebView

UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化。其加载数据的方式有三种:

第一种:

- (void)loadRequest:(NSURLRequest *)request;

这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的。例如:

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

第二种:

- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

这个方法需要将httml文件读取为字符串,其中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]];
}

第三种:

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

这个方式使用的比较少,但也更加自由,其中data是文件数据,MIMEType是文件类型,textEncodingName是编码类型,baseURL是素材资源路径。例如:

//加载网络请求
- (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;

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;

UIWebView代理

在UIWebViewDelegate方法中,一共有4个方法需要注意:

//是否允许加载网页,也可获取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;

UIWebView和JavaScript交互

UIWebView和JavaScript的交互主要涉及两个方面:JS执行OC代码、OC调取JS代码。

JS执行OC代码

JS是不能执行OC代码的,但是可以变相的执行,JS可以将要执行的操作封装到网络请求里面,然后OC拦截这个请求,获取URL里面的字符串解析即可。例如:

- (BOOL)webView:(UIWebView *)webView  
  shouldStartLoadWithRequest:(NSURLRequest *)request  
              navigationType:(UIWebViewNavigationType)navigationType

OC调取JS代码

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"];

上述完整代码:

- (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是iOS8中出的一个新控件,算是对UIWebVeiw的升级版。使用上和UIWebView用法大体一致,主要是新增和优化了一些方法。 例如,使用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];
}

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;

WKWebView网页导航

和UIWebView相差不大,多了返回值,多了一些属性和方法。

@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;

WKWebView代理

UIWebView只有一个代理,但WKWebView有好几个,但常用的有2个, id navigationDelegate和id< 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的 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;

虽然很多设备以及升级到8.0系统,但是对于一些老的设备,我们还是需要使用UIWebView控件来做兼容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏雨尘分享

iOS 和 H5 交互那些事 (UIWebView、WKWebView 总结篇)

1.6K5
来自专栏進无尽的文章

UI篇- UIWebView使用大全

UIWebView是常用开发控件,对于一些常用的设置是有必要记住或者记录下来的。 这里特别说一下,对于一个工程中整个就是一个WebView的情况,你可以通过一...

1511
来自专栏移动开发面面观

iOS的WebView——WKWebView

2342
来自专栏DannyHoo的专栏

iOS开发中的WKWebView与JS的交互

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2032
来自专栏移动端开发

WKWebView的使用与JS交互详细解读

前言:     WKWebView 这是在iOS8.0之后增加的一个比UIWebView更加完善和强大的控件!看网上关于它的博客也是有许多的了,从各个方面总结一...

4657
来自专栏移动端周边技术扩展

解决H5微信支付返回跳转问题

1.2K3
来自专栏mukekeheart的iOS之旅

iOS学习——UIAlertController详解

  在开发中,弹出提示框是必不可少的。这两天项目中统一对已经被iOS API废弃的UIAlertView和UIActionSheet进行替换,我们知道,UIAl...

51017
来自专栏乐沙弥的世界

Linux 下配置 HugePages

    HugePages是通过使用大页内存来取代传统的4kb内存页面,使得管理虚拟地址数变少,加快了从虚拟地址到物理地址的映射以及通过摒弃内存页面的换入换出以...

1124
来自专栏哈雷彗星撞地球

iOS下JS与OC互相调用(二)--WKWebView 拦截URL

在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互。 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WK...

2125
来自专栏编程语言

iOS 无弹框换图标,直接用就可以了

        对于iOS,是开发了API可以换图标,但是有规定的,就是你要换的图标是要在APP里面内置的,也就是说你要换的APPicon,是提前放在APP 包...

941

扫码关注云+社区

领取腾讯云代金券