浅析UIWebView编程

    UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页，也支持pdf, word等文档。

首先让我们了解一下UIWebView有哪些优点：

1. 可跨平台
   开发一次可以部署iOS、Android等平台。
2. 发布更新快
   在服务器端发布，能够实时更新终端展示，便于快速升级以及紧急修复bug。
3. 排版布局能力强
   强大的HTML+CSS让人膜拜

世界上有十全十美的人么？也许只有上帝吧。UIWebView的缺点：

1. 性能
   Native先生与HTML5先生争论时最喜欢说的一句话就是：“你性能不行”（看清楚了哈，不是“性能力不行”）。Web App运行在浏览器里，目前浏览器的开放能力难以支持HTML5与Native对抗。
2. 数据通讯复杂
   UIWebView与App之间进行数据通讯只能通过javascript或者UIWebViewDelegate来进行，客户端想传参数给UIWebView修改网页或者从网页中获取数据都比较复杂。

咱们应该扬长避短，在以下场景考虑使用UIWebView：

1. 排版复杂的内容
   图文混排、文字环绕、文章内各种超链及高亮显示。这些让iOS工程师抓狂的界面，让web前端小伙伴们搞定，吃顿饭，然后用UIWebView包起来。
2. 需后台灵活控制的界面
   认证、免责声明以及PM要求三天两头需要变幻莫测的页面等。怎么办？告诉我地址，UIWebView包起来，结束:)
3. 原网页
   查看新浪网、腾讯网等网页内容，这个木有办法，总不能让我们自己写一个浏览器功能吧。

UIWebView的常规使用方法：

1. 加载内容
   //加载网页或者本地文件
   - (void)loadRequest:(NSURLRequest *)request;
   
   //直接加载html内容，如果html中的图片等资源在本地目录，注意将baseURL指向该目录
   - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
   
   //功能与上面类似
   - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
2. 实现UIWebViewDelegate
   主要使用到的方法
   

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

   {
       //在这里截取网络请求，可以为所欲为的做你想做的事情:)
       //…
   }

3. 使用stringByEvaluatingJavaScriptFromString与UIWebView中的网页进行数据通讯，需要你有点javascript功底，也可以去看看js bridge的相关文章。

上面说的东西是不是太俗套，太正统了？下面讲点实际点儿的吧。

科普一下：
UIWebView包含着一个scrollView，iOS5的时候已经公开，在此之前需写代码遍历UIWebView的subviews把它找出来。scrollView里面包含着一个UIWebBrowserView用于渲染网页内容的，该属性没有公开，需要遍历其subviews找出来。

1. 去掉拖动到顶部或者底部时露出来的渐变颜色
   如图所示：
    解决办法：
   将scrollView中包含的所有UIImageView隐藏
   

   - (void)removeGradientBgColorOfWebView:(UIWebView*)aWebView{
      NSArray *subViews = aWebView.subviews;
       for (UIView* subView in subViews){
           if ([subView isKindOfClass:[UIScrollView class]]) {
               for (UIView* shadowView in [subView subviews]){
                      if ([shadowView isKindOfClass:[UIImageView class]]) {
                          [shadowView setHidden:YES];
                     }
                }
            }
          }
   }
   结果：
   

2. 白屏闪烁
   你嵌入的html内容是有背景色的，但是在load的时候还是会有白屏闪烁，在展现你的内容前会出现白色背景，任凭你怎么设置UIWebView或者里面scrollView, webBrowserView的backgroundColor都没有作用。解决办法：
   

   //在load之前，先设置两个属性
   _webView.opaque = NO;
   _webView.webBrowserView.hidden = YES;

   [_webView loadHTMLString:htmlStr baseURL:baseURL];

   在UIWebViewDelegate中实现如下：
   #pragma mark - UIWebViewDelegate

   - (void)webViewDidStartLoad:(UIWebView *)webView{
       _webView.webBrowserView.hidden = NO;
   }

   - (void)webViewDidFinishLoad:(UIWebView *)webView{
       _webView.opaque = YES;
       _webView.backgroundColor = …;
   }

3.  在网页顶部加上一个headerView，并随着网页一起滚动
   由于需要一起滚动，所以footerView应该是_webView.scrollView的subview。上面我们提到过_webView.scrollView.webBrowserView是用来渲染网页的view，所以我们的headerView只要在webBrowserView上面即可。

   [_webView.scrollView addSubview:_headerView];
   UIView *webBrowserView = [_webView webBrowserView];
   CGRect frame = webBrowserView.frame;
   frame.origin.y = CGRectGetMaxY(_headerView.frame);
   webBrowserView.frame = frame;
   注意：在scrollView顶部添加headerView，并且正确设置了webBrowserView的位置后不会影响到下面3中的contentSize计算，UIWebView应该已经考虑到了webBrowserView的位置偏移。
   
   下面红色区域即是headerView
   
   
   

4. 在网页的末尾加上一个footerView，并且跟着网页一块滚动
   由于需要一起滚动，所以footerView应该是_webView.scrollView的subview。正常情况下你是不知道网页被渲染后的高度的，也就是说不知道_webView.scrollView.contentSize，如果知道contentSize就好办了，直接将footerView添加在末尾。
   咱们可以利用KVO来解决这个问题。

   //监听scrollView的contentSize的变化
   - (void)webViewDidFinishLoad:(UIWebView *)webView{
       [self addObserverForWebViewContentSize];
       //0.1s后设置footerView的位置，以防止contentSize没有变化
       [self performSelector:@selector(layoutFooterView) withObject:nil afterDelay:0.1];
   }
   有同学不禁要问：为什么需要监听contentSize的变化呢？在webViewDidFinishLoad中直接取_webView.scrollView.contentSize不就可以了吗？
   解答：webViewDidFinishLoad会被多次回调，因为网页中有图片、表格等多种资源，UIWebView在加载资源的时候会不断调整contentSize以渲染新加载完成的内容。

   //contentSize变化时，重新布局footerView
   - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
       if (context == &kContentSizeFlag) {
            [self layoutFooterView];
      }
   }

   
   - (void)addObserverForWebViewContentSize{
       [_webView.scrollView addObserver:self forKeyPath:@“contentSize” options:0 context:&kContentSizeFlag];
   }
   
   - (void) removeObserverForWebViewContentSize{
       [_webView.contentScrollView removeObserver:self forKeyPath:@“contentSize”];
   }
   
   

   //设置footerView的合理位置
   - (void)layoutFooterView{
       //取消监听，因为这里会调整contentSize，避免无限递归
       [self removeObserverForWebViewContentSize];
       CGSize contentSize = _webView.scrollView.contentSize；
       CGFloat y = CGRectGetMaxY(_webView.webBrowserView.frame);
       //设置footerView的位置
       _footerView.frame = CGRectMake(0, y, contentSize.width, footerHeight);

        [_webView.scrollView addSubview:_footerView];
       _webView.scrollView.contentSize = CGSizeMake(contentSize.width, y + footerHeight);
       //重新监听
        [self addObserverForWebViewContentSize];
   } 
   
   //下图底部红色区域即footerView
   

   
   

5. 滑动隐藏顶部Bar
   如果你想在用户向上滑动时隐藏顶部bar，向下滑动时显示顶部bar，该怎么办呢？
   _webView.scrollView的delegate是_webView自身，你是不能接管的，所以拿不到scrollView的相关事件。
   怎么办呀？？？
   好吧，答案就是：KVO, contentOffset
   

   - (void)hideNavigationBar:(BOOL)animated { … }
   - (void)showNavigationBar:(BOOL)animated { … }

   
   - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context｛
       if(context == &kContentOffsetFlag){
           CGFloat y = [object contentOffset].y;
          UIScrollView *scrollView = _webView.scrollView;
           CGPoint p = [scrollView.panGestureRecognizer velocityInView:scrollView];
           CGFloat maxY = scrollView.contentSize.height + scrollView.contentInset.top - scrollView.bounds.size.height;
            if(fabsf(p.y) < 0.001 && _contentOffsetY - y > 5 && y < maxY - 5){
       [self showNavigationBar:YES];
   }
           else if(p.y < 0 && _webView.scrollView.dragging) {//上滑隐藏
               [self hideNavigationBar:YES];
           }
           else if(p.y > 1500){//快速下滑显示
               [self showNavigationBar:YES];
           }
           else if(y <= self.navigationBar.bounds.size.height){
               [self showNavigationBar:NO];
           }
   }