iOS开发:给UIWebView导航栏添加返回与关闭按钮

在iOS开发中,不免有原生与H5的交互,比如说:从原生页面的一个按钮,点击之后跳转到了一个H5的页面A,A页面中又有一个按钮,点击之后,又加载了一个新的H5页面B,从B点击一个按钮,又加载一个新的H5页面C,如果此时我们点击左上角的返回按钮,会直接返回到我们的原生页面。这样的话,用户的体验很不好,我们需要对WebView进行添加按钮事件的处理。

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

首先是初始化一个WebView:

@property (nonatomic,strong,readwrite) UIWebView *announceWebView;

- (UIWebView *)announceWebView {

    if (!_announceWebView) {

        _announceWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, deviceScreenWidth, deviceScreenHeight)];

        _announceWebView.backgroundColor = MAIN_VIEW_COLOR;

        _announceWebView.scalesPageToFit = YES;

        _announceWebView.allowsInlineMediaPlayback = YES;

        _announceWebView.mediaPlaybackRequiresUserAction = YES;

        [self.view addSubview:self.announceWebView];

    }

    return _announceWebView;

}

其次,在导航栏的左边添加一个自定义返回按钮和关闭按钮:

@property (nonatomic,strong,readwrite) UIBarButtonItem *returnButton;@property (nonatomic,strong,readwrite) UIBarButtonItem *closeItem;

- (UIBarButtonItem *)returnButton {

    if (!_returnButton) {

        _returnButton = [[UIBarButtonItem alloc] init];

        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

        UIImage *image = [UIImage imageNamed:@"fanhui.png"];

        [button setImage:image forState:UIControlStateNormal];//这是一张“<”的图片        [button setTitle:@" 返回" forState:UIControlStateNormal];

        [button addTarget:self action:@selector(respondsToReturnToBack:) forControlEvents:UIControlEventTouchUpInside];

        [button.titleLabel setFont:[UIFont systemFontOfSize:17]];

        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

        [button sizeToFit];

        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

        button.contentEdgeInsets = UIEdgeInsetsMake(0, -15, 0, 0);

        button.frame = CGRectMake(20, 0, 40, 40);

        _returnButton.customView = button;

        self.navigationItem.leftBarButtonItem = _returnButton;

    }

    return _returnButton;

}

- (UIBarButtonItem *)closeItem {

    if (!_closeItem) {

        _closeItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStyleDone target:self action:@selector(respondsToReturnToFind:)];

    }

    return _closeItem;

}

两个按钮的点击事件处理

- (void)respondsToReturnToBack:(UIButton *)sender {

    if ([self.announceWebView canGoBack]) {//判断当前的H5页面是否可以返回    //如果可以返回,则返回到上一个H5页面,并在左上角添加一个关闭按钮        [self.announceWebView goBack];

        self.navigationItem.leftBarButtonItems = @[self.returnButton, self.closeItem];

    } else {

    //如果不可以返回,则直接:        [self.navigationController popViewControllerAnimated:YES];

    }

}

- (void)respondsToReturnToFind:(UIBarButtonItem *)sender {

    [self.navigationController popViewControllerAnimated:YES];

}

最后再用[self.announceWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:API_URL_ANNOUNCEMENT]]]加载出WebView界面内容以及实现相关的代理即可。

你可能感兴趣的:(iOS开发:给UIWebView导航栏添加返回与关闭按钮)