iOS开发中带 Search 框与前进、后退、刷新、停止 的 WebView 的使用

iOS系统提供了 UIWebView 控件，从而可以方便地集成与网页相关的多种应用，该控件内置浏览器控件，可以用来浏览网页、打开文档等等。

一、UIWebView 可以加载和显示某个URL的网页，也可以显示基于HTML的本地网页或部分网页(不详细说)：

a. 加载 URL

1. WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)];   
2. NSString *path = @"http://www.baidu.com";   
3. NSURL *url = [NSURL URLWithString:path];   
4. [WebView loadRequest:[NSURLRequest requestWithURL:url]];   

b. 加载 HTML

NSBundle *bundle = [NSBundle mainBundle];
NSString *resPath = [bundle resourcePath];
NSString *filePath = [resPath stringByAppendingPathComponent:@"Home.html"];
[webView loadHTMLString:[NSString stringWithContentsOfFile:filePath]
  baseURL:[NSURL fileURLWithPath:[bundle bundlePath]]];

二、使用网页加载指示，加载完成后再显示网页出来

今天我们主要介绍的就是这么一个带 Search 框与前进、后退、刷新、停止 的 WebView ，首先我们看一下原理与基本技术：

首先要指定委托方法：

       webView.delegate =self; 

    UIWebView主要有下面几个委托方法：

      1、- (void)webViewDidStartLoad:(UIWebView *)webView;开始加载的时候执行该方法。
      2、- (void)webViewDidFinishLoad:(UIWebView *)webView;加载完成的时候执行该方法。
      3、- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;加载出错的时候执行该方法。

     这样，可以利用 webViewDidStartLoad 和 webViewDidFinishLoad 方法实现本功能

我们看一下效果图:

废话不多少了 直接上代码：

首先我们要新建一个  WJWebViewController 使其继承自 UIViewController，.h文件如下： 

//
//  WJWebViewController.h
//  Meetings
//
//  Created by WJHan on 16/1/29.
//  Copyright © 2016年 GearPart. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface WJWebViewController : UIViewController

- (instancetype)initWithURL:(NSURL *)url;

@end

这里只需要给外界暴漏一个带有URL的初始化方法就好了，其他的都不需要

接下来我们看看需要在.m 文件里面处理一些什么问题呢？

//
//  WJWebViewController.m
//  Meetings
//
//  Created by WJHan on 16/1/29.
//  Copyright © 2016年 GearPart. All rights reserved.
//

#import "ProgressHUD.h"
#import "WJWebViewController.h"

typedef enum : NSInteger {
    NavigationBarItemBack = 0,
    NavigationBarItemForward = 1,
    NavigationBarItemRefresh = 2,
} NavigationBarItemType;

@interface WJWebViewController () <UIWebViewDelegate, UITextFieldDelegate, UIScrollViewDelegate> {
    UIWebView *myWebView;
    UIBarButtonItem *backItem;
    UIBarButtonItem *forwardItem;
    UIBarButtonItem *refreshItem;
    NSURL *myUrl;
    BOOL isLoadOrNot;//这里非常关键，因为系统自带的 isLoading 方法不好用，所以需要咱们自己判断
}
@end

@implementation WJWebViewController

- (void)viewDidLoad {
    [self initNavigationBar];
    [self initPageView];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    if (myUrl && myWebView.request == nil)
        [myWebView loadRequest:[NSURLRequest requestWithURL:myUrl]];
}

#pragma mark - init

- (void)initNavigationBar {
    backItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_disable"] style:UIBarButtonItemStylePlain target:self action:@selector(doAction:)];
    backItem.tag = NavigationBarItemBack;
    forwardItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"forward_disable"] style:UIBarButtonItemStylePlain target:self action:@selector(doAction:)];
    forwardItem.tag = NavigationBarItemForward;
    refreshItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"stop_refresh"] style:UIBarButtonItemStylePlain target:self action:@selector(doAction:)];
    refreshItem.tag = NavigationBarItemRefresh;
    self.navigationItem.rightBarButtonItems = @[ refreshItem, forwardItem, backItem ];
}

- (void)initPageView {
    UITextField *myTextField = [[UITextField alloc] initWithFrame:CGRectMake(0, -44, self.view.bounds.size.width, 44)];
    myTextField.borderStyle = UITextBorderStyleRoundedRect;
    myTextField.keyboardType = UIKeyboardTypeURL;
    myTextField.delegate = self;

    myWebView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    myWebView.delegate = self;
    myWebView.scrollView.delegate = self;
    myWebView.scalesPageToFit = YES;
    myWebView.backgroundColor = [UIColor whiteColor];
    myTextField.text = [NSString stringWithFormat:@"%@", myUrl];
    [myWebView.scrollView addSubview:myTextField];

    [self.view addSubview:myWebView];
}

- (instancetype)initWithURL:(NSURL *)url {
    if (self = [self init])
        if (url.scheme.length == 0) {
            url = [NSURL URLWithString:[NSString stringWithFormat:@"http://%@", [url absoluteString]]];
        }
    myUrl = url;
    return self;
}

#pragma mark - action

- (void)doAction:(UIBarButtonItem *)sender {
    switch (sender.tag) {
        case NavigationBarItemBack:
            if (myWebView.canGoBack) {
                [myWebView goBack];
            }
            break;
        case NavigationBarItemForward:
            if (myWebView.canGoForward) {
                [myWebView goForward];
            }
            break;
        case NavigationBarItemRefresh:
            if (isLoadOrNot) {
                [myWebView stopLoading];
            } else {
                [myWebView reload];
            }
            break;
        default:
            break;
    }
}

- (void)refreshButtonsState {
    if (myWebView.canGoBack) {
        [backItem setImage:[UIImage imageNamed:@"back-1"]];
        [backItem setEnabled:YES];
    } else {
        [backItem setImage:[UIImage imageNamed:@"back_disable"]];
        [backItem setEnabled:NO];
    }
    if (myWebView.canGoForward) {
        [forwardItem setImage:[UIImage imageNamed:@"forward"]];
        [forwardItem setEnabled:YES];
    } else {
        [forwardItem setImage:[UIImage imageNamed:@"forward_disable"]];
        [forwardItem setEnabled:NO];
    }
    if (isLoadOrNot) {
        [refreshItem setImage:[UIImage imageNamed:@"stop_refresh"]];
    } else {
        [refreshItem setImage:[UIImage imageNamed:@"refresh_white"]];
    }
}

#pragma mark - UITextField Delegate
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    myUrl = [NSURL URLWithString:textField.text];
    if (myUrl)
        [myWebView loadRequest:[NSURLRequest requestWithURL:myUrl]];
    return YES;
}

- (void)textFieldDidBeginEditing:(UITextField *)textField {
    myWebView.scrollView.scrollEnabled = NO;
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
    myWebView.scrollView.scrollEnabled = YES;
}

#pragma mark - WebView Delegate
- (void)webViewDidStartLoad:(UIWebView *)webView {
    isLoadOrNot = YES;
    [self refreshButtonsState];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    isLoadOrNot = NO;
    self.title = [myWebView stringByEvaluatingJavaScriptFromString:@"document.title"];
    [self refreshButtonsState];
}

#pragma mark - UIScrollView Delegate

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

    if (myWebView.scrollView.contentOffset.y < -22) { <span style="font-family: SimSun;">//这里是向下拉界面出现搜索框，下拉的大小自己可以重新设置</span>

        myWebView.scrollView.contentInset = UIEdgeInsetsMake(44, 0, 0, 0);
    }
    if (myWebView.scrollView.contentOffset.y > -44) {//这里是向上推界面收起  推的大小自己可以重新设置
        myWebView.scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    }
}

@end

这样我们该有的效果就都有了，看下效果图

1.这是没有展开的时候的效果图

2.这是展开时候的效果图

剩下的前进后退刷新停止等操作，都OK的，就不一一截图了~