iOS开发:给UIWebview的导航栏添加返回、关闭按钮
2017-10-17 09:27
796 查看
在我们平日的开发中,不免有原生与H5的交互,比如说:从原生页面的一个按钮,点击之后跳转到了一个H5的页面A,A页面中又有一个按钮,点击之后,又加载了一个新的H5页面B,从B点击一个按钮,又加载一个新的H5页面C,如果此时我们点击左上角的返回按钮,会直接返回到我们的原生页面;
是不是上面给用户的体验很不好(当然残品经理会觉得是,我们都是无所谓的啦),此时我们想要重新定制返回按钮,我们想要从C页面判断是否还有上一级H5页面可供返回,如果有上一级页面还是H5,点击左上角的返回则返回到B页面,并且在B页面的左上角加上一个关闭按钮,这个关闭按钮的作用主要是为了关闭所有的H5的页面,直接返回到我们原生的页面;如果我们不点击关闭按钮,还是点击返回,则从B页面返回到A页面;再次点击返回,则关闭了H5的页面,回到了原生的页面;
说的也许有点儿绕,不过大致思想就是:先判断当前的H5页面是否可以返回:
如果可以返回,则返回到上一个H5页面,并在左上角添加一个关闭按钮,如果不可以返回,则直接:
下面是我的主要实现代码,我写一个继承与UIViewController的类,接受了UIWebviewDelegate,并定义了一个UIwebview的属性,给外面留了一个方法,只需要传递一个URL,我们就可以加载;如果有地方需要加载H5的页面,我们可以直接集成与这个类,这样的好处在于方便维护;
当然我封装的这个类,同时也是支持HTTPS的请求的;话不多说,代码如下:
创建一个类,继承与UIViewController,.h中的代码
.m中的实现如下:
具体的使用方法就是,创建一个类,继承与这类:SYWebViewController
然后在这个类的.m中的viewDidLoad中,调用父视图加载URL的方法,即:
效果如下图:打开百度(图片1),点击图片进入(图片2),点击返回返回到(图片3),图片1和图片的区别在于多了个关闭按钮:
图片1.png
图片2.png
图片3.png
GitHub地址:https://github.com/FirstDKS521/DKSWebView
纯手打,喜欢点个赞,希望对看到的你有所帮助!!!
作者:First灬DKS
链接:http://www.jianshu.com/p/fa070e790647
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
是不是上面给用户的体验很不好(当然残品经理会觉得是,我们都是无所谓的啦),此时我们想要重新定制返回按钮,我们想要从C页面判断是否还有上一级H5页面可供返回,如果有上一级页面还是H5,点击左上角的返回则返回到B页面,并且在B页面的左上角加上一个关闭按钮,这个关闭按钮的作用主要是为了关闭所有的H5的页面,直接返回到我们原生的页面;如果我们不点击关闭按钮,还是点击返回,则从B页面返回到A页面;再次点击返回,则关闭了H5的页面,回到了原生的页面;
说的也许有点儿绕,不过大致思想就是:先判断当前的H5页面是否可以返回:
//判断当前H5是否可以返回 [self.webView canGoBack]
如果可以返回,则返回到上一个H5页面,并在左上角添加一个关闭按钮,如果不可以返回,则直接:
//回到原生页面 [self.navigationController popViewControllerAnimated:YES];
下面是我的主要实现代码,我写一个继承与UIViewController的类,接受了UIWebviewDelegate,并定义了一个UIwebview的属性,给外面留了一个方法,只需要传递一个URL,我们就可以加载;如果有地方需要加载H5的页面,我们可以直接集成与这个类,这样的好处在于方便维护;
当然我封装的这个类,同时也是支持HTTPS的请求的;话不多说,代码如下:
创建一个类,继承与UIViewController,.h中的代码
#import <UIKit/UIKit.h> @interface SYWebViewController : UIViewController<UIWebViewDelegate, NSURLConnectionDelegate> //定义一个属性,方便外接调用 @property (nonatomic, strong) UIWebView *webView; //声明一个方法,外接调用时,只需要传递一个URL即可 - (void)loadHTML:(NSString *)htmlString; @end
.m中的实现如下:
#import "SYWebViewController.h" @interface NSURLRequest (InvalidSSLCertificate) + (BOOL)allowsAnyHTTPSCertificateForHost:(NSString*)host; + (void)setAllowsAnyHTTPSCertificate:(BOOL)allow forHost:(NSString*)host; @end @interface SYWebViewController () @property (nonatomic, strong) NSURLRequest *request; //判断是否是HTTPS的 @property (nonatomic, assign) BOOL isAuthed; //返回按钮 @property (nonatomic, strong) UIBarButtonItem *backItem; //关闭按钮 @property (nonatomic, strong) UIBarButtonItem *closeItem; @end @implementation SYWebViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 64)]; [self.view addSubview:self.webView]; [self addLeftButton]; } //加载URL - (void)loadHTML:(NSString *)htmlString { NSURL *url = [NSURL URLWithString:htmlString]; self.request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringLocalCacheData timeoutInterval:5.0]; [NSURLRequest setAllowsAnyHTTPSCertificate:YES forHost:[url host]]; [self.webView loadRequest:self.request]; } #pragma mark - UIWebViewDelegate //开始加载 - (BOOL)webView:(UIWebView *)awebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString* scheme = [[request URL] scheme]; //判断是不是https if ([scheme isEqualToString:@"https"]) { //如果是https:的话,那么就用NSURLConnection来重发请求。从而在请求的过程当中吧要请求的URL做信任处理。 if (!self.isAuthed) { NSURLConnection* conn = [[NSURLConnection alloc] initWithRequest:request delegate:self]; [conn start]; [awebView stopLoading]; return NO; } } return YES; } //设置webview的title为导航栏的title - (void)webViewDidFinishLoad:(UIWebView *)webView { self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; } #pragma mark ================= NSURLConnectionDataDelegate <NSURLConnectionDelegate> - (BOOL)connection:(NSURLConnection *)connection canAuthenticateAgainstProtectionSpace:(NSURLProtectionSpace *)protectionSpace { return [protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]; } - (void)connection:(NSURLConnection *)connection willSendRequestForAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge { if ([challenge previousFailureCount] == 0) { self.isAuthed = YES; //NSURLCredential 这个类是表示身份验证凭据不可变对象。凭证的实际类型声明的类的构造函数来确定。 NSURLCredential *cre = [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust]; [challenge.sender useCredential:cre forAuthenticationChallenge:challenge]; } } - (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error { NSLog(@"网络不给力"); } - (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response { self.isAuthed = YES; //webview 重新加载请求。 [self.webView loadRequest:self.request]; [connection cancel]; } #pragma mark - 添加关闭按钮 - (void)addLeftButton { self.navigationItem.leftBarButtonItem = self.backItem; } //点击返回的方法 - (void)backNative { //判断是否有上一层H5页面 if ([self.webView canGoBack]) { //如果有则返回 [self.webView goBack]; //同时设置返回按钮和关闭按钮为导航栏左边的按钮 self.navigationItem.leftBarButtonItems = @[self.backItem, self.closeItem]; } else { [self closeNative]; } } //关闭H5页面,直接回到原生页面 - (void)closeNative { [self.navigationController popViewControllerAnimated:YES]; } #pragma mark - init - (UIBarButtonItem *)backItem { if (!_backItem) { _backItem = [[UIBarButtonItem alloc] init]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; //这是一张“<”的图片,可以让美工给切一张 UIImage *image = [UIImage imageNamed:@"sy_back"]; [btn setImage:image forState:UIControlStateNormal]; [btn setTitle:@"返回" forState:UIControlStateNormal]; [btn addTarget:self action:@selector(backNative) forControlEvents:UIControlEventTouchUpInside]; [btn.titleLabel setFont:[UIFont systemFontOfSize:17]]; [btn setTitleColor:[UIColor sy_backColor] forState:UIControlStateNormal]; //字体的多少为btn的大小 [btn sizeToFit]; //左对齐 btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; //让返回按钮内容继续向左边偏移15,如果不设置的话,就会发现返回按钮离屏幕的左边的距离有点儿大,不美观 btn.contentEdgeInsets = UIEdgeInsetsMake(0, -15, 0, 0); btn.frame = CGRectMake(0, 0, 40, 40); _backItem.customView = btn; } return _backItem; } - (UIBarButtonItem *)closeItem { if (!_closeItem) { _closeItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(closeNative)]; } return _closeItem; } @end
具体的使用方法就是,创建一个类,继承与这类:SYWebViewController
#import <UIKit/UIKit.h> #import "SYWebViewController.h" @interface SYFlashHTMLViewController : SYWebViewController @end
然后在这个类的.m中的viewDidLoad中,调用父视图加载URL的方法,即:
- (void)viewDidLoad { [super viewDidLoad]; self.webView.delegate = self; [self loadHTML:self.htmlString]; }
效果如下图:打开百度(图片1),点击图片进入(图片2),点击返回返回到(图片3),图片1和图片的区别在于多了个关闭按钮:
图片1.png
图片2.png
图片3.png
GitHub地址:https://github.com/FirstDKS521/DKSWebView
纯手打,喜欢点个赞,希望对看到的你有所帮助!!!
作者:First灬DKS
链接:http://www.jianshu.com/p/fa070e790647
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- iOS开发:给UIWebView导航栏添加返回与关闭按钮
- IOS开发:导航栏添加多个按钮以及在左边添加logo
- ios开发之自定义默认生成的导航栏 标题 颜色 返回按钮
- IOS开发OC 如何将导航栏左侧系统自动生成的返回按钮的文字去掉,只保留小于号"<"图案
- IOS开发(10)UIBarButtonItem导航栏添加按钮
- iOS 开发中在导航栏添加多个按钮并改变它的位置
- iOS应用开发中导航栏按钮UIBarButtonItem的添加教程
- IOS 改变导航栏返回按钮的标题
- 【iOS开发】添加系统自带的tableView左滑按钮
- IOS 怎么修改Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色
- iOS开发UI基础—13在UIImageView中添加按钮以及Tag的参数说明
- iOS开发之自定义导航栏返回按钮右滑返回手势失效的解决
- iOS导航栏背景,标题和返回按钮文字颜色
- ios中怎么修改导航栏返回按钮
- IOS 改变导航栏返回按钮的标题
- swift-导航栏添加自定义返回按钮
- ios开发 暂停和返回游戏按钮设计
- ios导航栏又按钮添加图片后使其保持原色
- iOS修改导航栏返回按钮样式
- ios导航栏自定义返回按钮后,多出蓝点bug