给WKWebView的导航栏添加返回、关闭按钮

在我们平日的开发中，不免有原生与H5的交互。比如说：原生页面的一个按钮，点击之后跳转到了一个H5的页面A，A页面中又有一个按钮，点击之后，又加载了一个新的H5页面B，从B点击一个按钮，又加载一个新的H5页面C。如果此时我们点击左上角的“返回”按钮，会直接返回到我们的原生页面。

是不是上面给用户的体验很不好？此时我们想要重新定制“返回”按钮，我们想要从C页面判断是否还有上一级H5页面可供返回，如果有上一级页面还是H5，点击左上角的返回按钮则返回到B页面，并且在B页面的左上角加上一个“关闭”按钮，这个关闭按钮的作用主要是为了关闭所有的H5的页面，直接返回到我们原生的页面。如果我们不点击“关闭”按钮，还是点击“返回”按钮，则从B页面返回到A页面，再次点击返回，则关闭了H5的页面，回到了原生的页面。

效果图：

 

实现代码：

#import "MallController.h"
 
@interface MallController ()
 
@property (nonatomic,strong) WKWebView *webView;
 
@property (nonatomic,strong) UIBarButtonItem *backItem;
 
///关闭按钮
@property (nonatomic,strong) UIBarButtonItem *closeItem;
 
@end
 
@implementation MallController
 

- (UIBarButtonItem *)backBarItem
{
    if (!_backItem) {
        UIButton *leftBackBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 18)];
        leftBackBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        [leftBackBtn setImage:[UIImage imageNamed:@"nav_arrow"] forState:UIControlStateNormal];
        [leftBackBtn addTarget:self action:@selector(backItemAction:) forControlEvents:UIControlEventTouchUpInside];
        _backItem = [[UIBarButtonItem alloc] initWithCustomView:leftBackBtn];
    }
    return _backItem;
}
 
- (void)backItemAction:(UIButton *)sender
{
    if ([self.webView canGoBack] == YES) { //如果当前H5可以返回
        //则返回上一个H5页面
        [self.webView goBack];
    }else{
        //否则回到原生页面
        [self.navigationController dismissViewControllerAnimated:YES completion:nil];
    }
}
 
 
/// 关闭按钮
- (UIBarButtonItem *)closeItem{
    if (!_closeItem) {
        UIButton *closeBtn = [HELPER buttonWithSuperView:nil andNormalTitle:@"关闭" andNormalTextColor:COLOR(whiteColor) andTextFont:14 andNormalImage:nil andCornerRadius:0 backgroundColor:COLOR(clearColor) addTarget:self action:@selector(closeItemAction) forControlEvents:UIControlEventTouchUpInside andMasonryBlock:nil];
        closeBtn.frame = FRAME(0, 0, 30, 30);
        _closeItem = [[UIBarButtonItem alloc] initWithCustomView:closeBtn];
    }
    return _closeItem;
}
 
- (void)closeItemAction
{
    //直接回到原生页面
    [self.navigationController dismissViewControllerAnimated:YES completion:nil];
}
 
 
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self initUI];
}
 
- (void)initUI
{
    self.webView = [self webViewWithSuperView:self.view requestURLStr:@"https://h5.youzan.com/v2/feature/E3Wlj8xf2Z?ps=320" target:self andMasonryBlock:^(MASConstraintMaker * _Nonnull make) {
        make.edges.equalTo(self.view);
    }];
    [self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil];
}
 
 
#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
{
    [self updataNavigationitems];
    
    if ([keyPath isEqualToString:@"title"]) {
        [self setTitleViewTitle:change[@"new"]];
    }
}
 
- (void)updataNavigationitems
{
    if (self.webView.canGoBack) {
        UIBarButtonItem *spaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
        spaceItem.width = -12;
        [self.navigationItem setLeftBarButtonItems:@[spaceItem,self.backItem,self.closeItem] animated:NO];
    }else{
        [self.navigationItem setLeftBarButtonItems:@[self.backBarItem] animated:NO];
    }
}
 
 
- (void)dealloc
{
    //移除观察者，否则会引起奔溃
    [self.webView removeObserver:self forKeyPath:@"title" context:nil];
}
 
 
@end