IOS WebView控件详解
概述
WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebView和WKWebView,UIWebView是iOS2之后开始使用,WKWebView是在iOS8开始使用,WKWebView将逐步取代笨重的UIWebView。
相比UIWebView,WKWebView做了如下优化:
- WKWebView更多的支持HTML5的特性
- WKWebView更快,占用内存可能只有UIWebView的1/3 ~ 1/4
- WKWebView高达60fps的滚动刷新率和丰富的内置手势
- WKWebView具有Safari相同的JavaScript引擎
- WKWebView增加了加载进度属性
UIWebView
UIWebView继承与UIView,因此,其初始化方法和一般的view一样,通过alloc和init进行初始化。其加载数据的方式有三种:
第一种:
- (void)loadRequest:(NSURLRequest *)request;
这是加载网页最常用的一种方式,通过一个网页URL来进行加载,这个URL可以是远程的也可以是本地的。例如:
- (void)simpleUIWebViewTest { // 1.创建webview,并设置大小,"20"为状态栏高度 CGFloat width = self.view.frame.size.width; CGFloat height = self.view.frame.size.height - 20; UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, width, height)]; // 2.创建URL NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; // 3.创建Request NSURLRequest *request =[NSURLRequest requestWithURL:url]; // 4.加载网页 [webView loadRequest:request]; // 5.最后将webView添加到界面 [self.view addSubview:webView]; self.webView = webView; }
第二种:
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
这个方法需要将httml文件读取为字符串,其中baseURL是我们自己设置的一个路径,用于寻找html文件中引用的图片等素材。例如:
- (void)loadLocalHTMLFileToUIWebView{ // 获取本地html文件文件路径 NSString *localHTMLPageName = @"myPage"; NSString *path = [[NSBundle mainBundle] pathForResource:localHTMLPageName ofType:@"html"]; // 从html文件中读取html字符串 NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL]; // 加载本地HTML字符串 [self.webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]]; }
第三种:
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
这个方式使用的比较少,但也更加自由,其中data是文件数据,MIMEType是文件类型,textEncodingName是编码类型,baseURL是素材资源路径。例如:
//加载网络请求 - (void)loadRequest:(NSURLRequest *)request; /* 功能:加载本地HTML字符串 string为要加载的本地HTML字符串 baseURL用来确定htmlString的基准地址,相当于HTML的<base>标签的作用,定义页面中所有链接的默认地址 */ - (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; /* 加载二进制数据 */ - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;
UIWebView导航
在我们浏览网页,时常会使用到的刷新网页、前进、后退等导航操作,UIWebView里面也有对应的操作方法。直接代码讲解:
#pragma mark - 判断属性 // 是否可以后退 @property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack; // 是否可以向前 @property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward; // 是否正在加载 @property (nonatomic, readonly, getter=isLoading) BOOL loading; #pragma mark - 操作方法 // 刷新网页 - (void)reload; // 停止加载网页 - (void)stopLoading; // 后退 - (void)goBack; // 前进 - (void)goForward;
UIWebView代理
在UIWebViewDelegate方法中,一共有4个方法需要注意:
//是否允许加载网页,也可获取js要打开的url,通过截取此url可与js交互 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //开始加载网页 - (void)webViewDidStartLoad:(UIWebView *)webView; //网页加载完成 - (void)webViewDidFinishLoad:(UIWebView *)webView; //网页加载错误 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;
UIWebView和JavaScript交互
UIWebView和JavaScript的交互主要涉及两个方面:JS执行OC代码、OC调取JS代码。
JS执行OC代码
JS是不能执行OC代码的,但是可以变相的执行,JS可以将要执行的操作封装到网络请求里面,然后OC拦截这个请求,获取URL里面的字符串解析即可。例如:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
OC调取JS代码
OC调取JS用到了WebView的一个方法stringByEvaluatingJavaScriptFromString。
// 实现自动定位JS代码, htmlLocationID为定位的位置(由JS开发人员给出),实现自动定位代码,应该在网页加载完成之后再调用 NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID]; // webview执行代码 [self.webView stringByEvaluatingJavaScriptFromString:javascriptStr]; // 获取网页的title NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
上述完整代码:
- (void)viewDidLoad { [super viewDidLoad]; [self initWebView]; } - (void)initWebView{ // 1.创建webview,并设置大小,"20"为状态栏高度 CGFloat width = self.view.frame.size.width; CGFloat height = self.view.frame.size.height - 20; UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0,20,width,height)]; // 2.创建URL NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"]; // 3.创建Request NSURLRequest *request =[NSURLRequest requestWithURL:url]; // 4.加载网页 [webView loadRequest:request]; // 5.最后将webView添加到界面 [self.view addSubview:webView]; self.webView = webView; webView.delegate = self; } #pragma mark 设置前进后退按钮状态 -(void)setBarButtonStatus{ if (_webView.canGoBack) { _barButtonBack.enabled = YES; }else{ _barButtonBack.enabled = NO; } if(_webView.canGoForward){ _barButtonForward.enabled = YES; }else{ _barButtonForward.enabled = NO; } } /*浏览器后退*/ - (void)clickGoBackBtn{ if(self.webView.canGoBack){ [self.webView goBack]; } } /*浏览器前进*/ - (void)clickGoForwardBtn{ if(self.webView.canGoForward){ [self.webView goForward]; } } #pragma mark - UIWebViewDelegate代理方法 #pragma mark 开始加载 //是否允许加载网页,也可获取js要打开的url,通过截取此url可与js交互 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { //截取URL,这里可以和JS进行交互,但这里没有写,因为会涉及到JS的一些知识,增加复杂性 NSString *urlString = [request.URL absoluteString]; urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; NSArray *urlComps = [urlString componentsSeparatedByString:@"://"]; NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps); return YES; } //开始加载网页 - (void)webViewDidStartLoad:(UIWebView *)webView{ //显示网络请求加载 [UIApplication sharedApplication].networkActivityIndicatorVisible = true; } //网页加载完成 - (void)webViewDidFinishLoad:(UIWebView *)webView{ //隐藏网络请求加载图标 [UIApplication sharedApplication].networkActivityIndicatorVisible = false; [self setBarButtonStatus]; //取得html内容 NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]); } //网页加载错误 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{ UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"系统提示" message:@"网络连接发生错误!" delegate:self cancelButtonTitle:nil otherButtonTitles:@"确定", nil]; [alert show]; }
WKWebView
WKWebView是iOS8中出的一个新控件,算是对UIWebVeiw的升级版。使用上和UIWebView用法大体一致,主要是新增和优化了一些方法。
例如,使用WKWebView加载百度首页。
- (void)wkWebViewEasyUse { //1.创建WKWebView CGFloat width = self.view.frame.size.width; CGFloat height = self.view.frame.size.height - 20; WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0,20,width,height)]; //2.创建URL NSURL *URL = [NSURL URLWithString:@"http://www.baidu.com"]; //3.创建Request NSURLRequest *request = [NSURLRequest requestWithURL:URL]; //4.加载Request [webView loadRequest:request]; //5.添加到视图 self.webView = webView; [self.view addSubview:webView]; }
UIWebView有的,WKWebView都有,WKWebView多了一个加载文件方法,而且WKWebView的这些加载方法都有返回值。
加载方法
/*加载请求*/ - (WKNavigation *)loadRequest:(NSURLRequest *)request; /*加载本地HTML字符串*/ - (WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; /*加载本地文件*/ - (WKNavigation *)loadFileURL:(NSURL*)url allowingReadAccessToURL:(NSURL*)url; /* 加载二进制数据 */ - (WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL;
WKWebView网页导航
和UIWebView相差不大,多了返回值,多了一些属性和方法。
@property (nonatomic, readonly) BOOL canGoBack; @property (nonatomic, readonly) BOOL canGoForward; @property (nonatomic, readonly, getter=isLoading) BOOL loading; - (WKNavigation *)goBack; - (WKNavigation *)goForward; - (WKNavigation *)reload; - (void)stopLoading; /* 加载进度,取值范围0~1 */ @property (nonatomic, readonly) double estimatedProgress; /* 是否允许左右划手势导航,默认不允许 */ @property (nonatomic) BOOL allowsBackForwardNavigationGestures; /* 访问历史列表 */ @property (nonatomic, readonly, strong) WKBackForwardList *backForwardList; /* 会比较网络数据是否有变化,没有变化则使用缓存,否则从新请求 */ - (WKNavigation *)reloadFromOrigin; /* 比向前向后更强大,可以跳转到某个指定历史页面 */ - (WKNavigation *)goToBackForwardListItem:(WKBackForwardListItem *)item;
WKWebView代理
UIWebView只有一个代理,但WKWebView有好几个,但常用的有2个,
id navigationDelegate和id< WKUIDelegate > UIDelegate。WKNavigationDelegate: 最常用,和UIWebViewDelegate功能类似,追踪加载过程,有是否允许加载、开始加载、加载完成、加载失败。WKUIDelegate:UI界面相关,原生控件支持,三种提示框:输入、确认、警告。
WKNavigationDelegate常用代理:
/* 1.在发送请求之前,决定是否跳转 */ - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler; /* 2.页面开始加载 */ - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation; /* 3.在收到服务器的响应头,根据response相关信息,决定是否跳转。 */ - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler; /* 4.开始获取到网页内容时返回,需要注入JS,在这里添加 */ - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation; /* 5.页面加载完成之后调用 */ - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation; /* error - 页面加载失败时调用 */ - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation; /* 其他 - 处理服务器重定向Redirect */ - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
WKUIDelegate常用代理
/* 输入框,页面中有调用JS的 prompt 方法就会调用该方法 */ - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *result))completionHandler; /* 确认框,页面中有调用JS的 confirm 方法就会调用该方法 */ - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler; /* 警告框,页面中有调用JS的 alert 方法就会调用该方法 */ - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
虽然很多设备以及升级到8.0系统,但是对于一些老的设备,我们还是需要使用UIWebView控件来做兼容。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
xamarin android toolbar(踩坑完全入门详解)
网上关于toolbar的教程有很多,很多新手,在使用toolbar的时候踩坑实在太多了,不好好总结一下,实在浪费。如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到这篇文章,说明还是搜了xamarin android toolbar。那么这篇文章就好好总结一下toolbar在xamarin android中如何使用,减少大家踩坑的时间。 了解Toolbar android3.0推了ActionBar这个控件,android5.0开始推出Materal Design,其中就有ToolBar控件。可能官方觉得ActionBar限制app开发设计的弹性,google非常推荐大家使用ToolBar来作为客户端的导航栏,以此来取代ActionBar。 ToolBar使用更灵活,设计更多样性。主要的优点有1.可以设置导航栏图标、Logo、标题和子标题等属性; 2可添加自定义控件;3.支持Action Menu;4.可随意设置位置 xamarin android中使用Toolbar 官方为了将toolbar这一控件向下兼容,推出了兼容版的toolbar,所以首先的...
- 下一篇
Android 系统ID介绍
Android上系统ID有很多,本文只介绍常用的ANDROID ID、DEVICE ID、IMEI/MEID、WIFI/BT ADDRESS等几个,本文介绍这些ID的数据格式、长度及一些基本知识。 一、DEVICE_ID DEVICE_ID是设备ID标识,用于唯一标识设备,这个ID似乎并非是独立的一串数字,而会由于终端的硬件配置不同,所取到的结果不同。 比如GSM手机DEVICE_ID可能是IMEI号,CDMA手机可能是MEID,不带MODEM的手机可能会返回NULL,也可能返回其它唯一值,比如MAC地址等。 二、MAC ADDRESS MAC ADDRESS有两种:Wifi和BT,在设备出厂时分别独立设置。MAC地址共48位(6个字节),十六进制表示。前24位由IEEE决定如何分配,后24位由实际生产该网络设备的厂商自行指定。 MAC地址存储位置(WIFI): /sys/class/net/wlan0/address 三、ANDROID_ID ANDROID_ID是Android系统第一次启动时产生的一个64bit(16BYTES)数,如果设备被wipe还原后,该ID将被重置(变化)...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Mario游戏-低调大师作品
- CentOS关闭SELinux安全模块
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池