iOS 给UIWebView添加头视图和尾视图

//
//  WebView.m
//  标签
//
//  Created by TK on 15/11/24.
//  Copyright (c) 2015年 TK. All rights reserved.
//

#import "WebView.h"

#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
#define URL @"https://www.baidu.com"

@interface WebView () <UIWebViewDelegate> {

    UILabel *httpTitle;
}
@property (nonatomic, strong) UIView* webBrowserView;

@end

@implementation WebView

- (void)viewDidLoad {
    [super viewDidLoad];

    self.webView.scrollView.backgroundColor = [UIColor whiteColor];
    
    [self makeWebView];

}

- (void)makeWebView {

    
    
    
    self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 80, WIDTH, HEIGHT-50-30)];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:URL]];
    self.webView.delegate = self;
    self.webView.backgroundColor = [UIColor whiteColor];
//    [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.background='#2E2E2E'"];
    //监听webView的滚动到何处
    [self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];
    [self.view addSubview:self.webView];
    [self.webView loadRequest:request];
    //添加webview的透视图
    [self headViewToWebView:self.webView];
    
    
    //显示http的网页标题
    httpTitle = [[UILabel alloc] initWithFrame:CGRectMake(10 + 50+20, 30, WIDTH- 170, 50)];
    httpTitle.backgroundColor = [UIColor orangeColor];
    httpTitle.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:httpTitle];
    
    
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(WIDTH - 70, 30, 55, 50);
    btn.backgroundColor = [UIColor orangeColor];
    btn.layer.masksToBounds = YES;
    btn.layer.cornerRadius = 5;
    //imageLayer.borderColor = [UIColor grayColor].CGColor;  //边框颜色
    //imageLayer.borderWidth = 2.0;  //边框宽度
    btn.layer.borderColor = [UIColor blackColor].CGColor;
    btn.layer.borderWidth = 1.00;
    [btn addTarget:self action:@selector(butClick) forControlEvents:UIControlEventTouchUpInside];
    btn.titleLabel.font = [UIFont systemFontOfSize:12];
    [btn setTitle:@"获取标题" forState:UIControlStateNormal];
    [self.view addSubview:btn];
    
    
    
    
    UIButton *black = [UIButton buttonWithType:UIButtonTypeCustom];
    black.frame = CGRectMake(10, 30, 50, 50);
    black.backgroundColor = [UIColor orangeColor];
    black.layer.masksToBounds = YES;
    black.layer.cornerRadius = 5;
    [black setTitle:@"black" forState:UIControlStateNormal];
    [black addTarget:self action:@selector(blackClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:black];
}
- (void)headViewToWebView:(UIWebView *)web {

    //1获取UIWebBrowserView
    self.webBrowserView = web.scrollView.subviews[0];
     UIImageView * headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 50)];
    headerImageView.backgroundColor = [UIColor colorWithRed:0.09 green:0.57 blue:0.82 alpha:1];
    //2改变UIWebBrowserView的坐标
    CGRect frame = self.webBrowserView.frame;
    
    frame.origin.y = CGRectGetMaxY(headerImageView.frame);
    
    self.webBrowserView.frame = frame;
    
//    //3.添加头部视图（这种情况头部视图不会随着webView的滚动而随着滚动，是固定的）
//     [self.webView sendSubviewToBack:headerImageView];
    // [self.webView addSubview:headerImageView];

    //要想添加的视图随着一块滚动，看以下操作：
    //4将视图添加到webView的ScrollView上
    UIView * headView = [[UIView alloc]init];
    
    headView.backgroundColor = [UIColor colorWithRed:0.24 green:0.71 blue:0.34 alpha:1];
    headView.frame = CGRectMake(0, 0, WIDTH, 50);

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, headView.frame.size.width, headView.frame.size.height)];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = @"h5头视图";
    [headView addSubview:label];
    
    [self.webView.scrollView addSubview:headView];
    
    


}

- (void)blackClick {
    [self.webView canGoBack];
    [self removeObserverForWebViewContentSize];
    [self dismissViewControllerAnimated:YES completion:nil];
    
}


//监听结果回调
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

    //在这里面添加代码
    //这里是添加在h5上面的
    [self myView];

}
- (void)myView {

    //取消监听，因为这里会调整contentSize，避免无限递归
    [self removeObserverForWebViewContentSize];
    UIView *viewss = [self.view viewWithTag:99999];
    CGSize contentSize = self.webView.scrollView.contentSize;
    UIView *vi = [[UIView alloc]init];
    vi.backgroundColor = [UIColor yellowColor];
    vi.userInteractionEnabled = YES;
    vi.tag = 99999;
    vi.frame = CGRectMake(0, contentSize.height, WIDTH, 50);
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, vi.frame.size.width, vi.frame.size.height)];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = @"h5尾视图";
    [vi addSubview:label];
    [self.webView.scrollView addSubview:vi];
    self.webView.scrollView.contentSize = CGSizeMake(contentSize.width, contentSize.height + 50);
    //重新监听
    [self addObserverForWebViewContentSize];
}
//移除观察者
- (void)removeObserverForWebViewContentSize {
    UIView *viewss = [self.view viewWithTag:99999];
    [viewss removeFromSuperview];
    [self.webView.scrollView removeObserver:self forKeyPath:@"contentSize"];

}
//添加监听
- (void)addObserverForWebViewContentSize {
   
    [self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:0 context:nil];

}
- (void)butClick {

    NSString* str = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    
    httpTitle.text = str;

}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end