IOS WebView控件详解

来源：互联网发布：网络直播设备人员编辑：程序博客网时间：2024/06/18 13:33

概述

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

相比UIWebView，WKWebView做了如下优化：

WKWebView更多的支持HTML5的特性
WKWebView更快，占用内存可能只有UIWebView的1/3 ~ 1/4
WKWebView高达60fps的滚动刷新率和丰富的内置手势
WKWebView具有Safari相同的JavaScript引擎
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];// 获取网页的titleNSString *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控件来做兼容。

1 0