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

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

是否是上面给用户的体验很很差？此时咱们想要从新定制“返回”按钮，咱们想要从C页面判断是否还有上一级H5页面可供返回，若是有上一级页面仍是H5，点击左上角的返回按钮则返回到B页面，而且在B页面的左上角加上一个“关闭”按钮，这个关闭按钮的做用主要是为了关闭全部的H5的页面，直接返回到咱们原生的页面。若是咱们不点击“关闭”按钮，仍是点击“返回”按钮，则从B页面返回到A页面，再次点击返回，则关闭了H5的页面，回到了原生的页面。ide

效果图：
atom

实现代码：spa

#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