现在App开发混合式开发还是比较常见的,即传统模式与PC网页端相结合。
那iOS中就必须得提一下UIWebView这个控件了。在一些媒体资讯类的新闻详情页中尤为常见。既能够提高开发效率,又有非常良好的用户体验。那下面就详细介绍一下UIWebview这个控件。
1. 首先还是有必要了解以下几个事情的:
(1)//自动对页面进行缩放以适应屏幕
@property(nonatomic)BOOL scalesPageToFit;
(2)//检测类型
@property(nonatomic)UIDataDetectorTypes dataDetectorTypes
==>这里详细一点:
<pre name="code" class="objc">typedef NS_OPTIONS(NSUInteger, UIDataDetectorTypes) { UIDataDetectorTypePhoneNumber = 1 << 0, // Phone number detection UIDataDetectorTypeLink = 1 << 1, // URL detection UIDataDetectorTypeAddress NS_ENUM_AVAILABLE_IOS(4_0) = 1 << 2, // Street address detection UIDataDetectorTypeCalendarEvent NS_ENUM_AVAILABLE_IOS(4_0) = 1 << 3, // Event detection UIDataDetectorTypeNone = 0, // No detection at all UIDataDetectorTypeAll = NSUIntegerMax // All types } __TVOS_PROHIBITED;
2. UIWebViewDelegate代理有如下几个代理方法,比较重要:
(1)//一般这里可以得到从Web端返回过来的数据(实际开发中碰到这种需求可能会理解更深点)
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
(3)//网页加载完毕
(void)webViewDidFinishLoad:(UIWebView *)webView;
(4)//网页加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;
3.几个比较重要的点:
(1)OC中调用JavaScript,通过UIWebView的
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;方法来执行一段需要执行的JavaScript代码的,然后得到执行结果。
(2)一些比较常见的使用
1.获取当前页面的Title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
2.获取当前页面的URL
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
3.获取HTML页中任意标签的某属性值(这个将在下面的实例中讲解)
4.了解了上面的一些基本知识点之后,下面我们通过一个小实例来实操一下。
我以网易爱玩网为例:网址是 http://play.163.com/m
右击查看网页源码可以看到如下图:
代码如下:
<span style="font-size:14px;">#import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIWebView *webView=[[UIWebView alloc]initWithFrame:self.view.bounds]; //1.自动对页面进行缩放以适应屏幕 webView.scalesPageToFit=YES; webView.dataDetectorTypes=UIDataDetectorTypeAll; webView.delegate=self; [self.view addSubview:webView]; //2.以网易爱玩网为例 NSURL *url=[NSURL URLWithString:@"http://play.163.com/m"]; NSURLRequest *request=[NSURLRequest requestWithURL:url]; [webView loadRequest:request]; } //一般这里可以得到从Web端返回过来的数据(实际开发中碰到这种需求可能会理解更深点) -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"shouldStartLoadWithRequest"); NSLog(@"看看这个URL地址:%@",[request.URL absoluteString]); return YES; } //开始加载 -(void)webViewDidStartLoad:(UIWebView *)webView { NSLog(@"webViewDidStartLoad"); } //完成加载 -(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"webViewDidFinishLoad"); //可以在这里获取当前页面的title,url,某个具体元素的值等 //1.当前页面的title NSString *title=[webView stringByEvaluatingJavaScriptFromString:@"document.title"]; NSLog(@"当前页面的title是:%@",title); //2.当前页面的URL NSString *webUrl=[webView stringByEvaluatingJavaScriptFromString:@"document.location.href"]; NSLog(@"当前页面的URL是:%@",webUrl); //3.获取某标签下的某属性值 NSString *metaFirst=[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('meta')[0].getAttribute('content')"]; NSLog(@"第一个meta标签的content值:%@",metaFirst); //4.像meta标签有很多个,那如何获取自己想要的meta标签下的某属性值呢 //一般这种JS代码可以让前端写完发给我们直接用 NSString *JS=@"(function(){\r\t\tvar meta = document.getElementsByTagName(\'meta\');\r\t\tfor(i in meta){\r\t\t\tif(typeof meta[i].name!=\"undefined\"&&meta[i].name.toLowerCase()==\"description\"){\r\t\t\t\treturn meta[i].content;\r\t\t\t}\r\t\t}\r\t})()"; NSString *descriptionTemp=[webView stringByEvaluatingJavaScriptFromString:JS]; NSLog(@"看看这个description值是:%@",descriptionTemp); } </span>
可以跟网页比对一下数据,确实就是我们预料中的数据。(代码中的几种方法是实际开发中比较常用的)。
PS:这个方法再强调一下:这里后台可以返回一些数据给我们,我们可以截取想要的数据
//一般这里可以得到从Web端返回过来的数据(实际开发中碰到这种需求可能会理解更深点) -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSLog(@"shouldStartLoadWithRequest"); NSLog(@"看看这个URL地址:%@",[request.URL absoluteString]); return YES; }
实例运行效果如下:(有兴趣的童鞋可以去下载爱玩这个App哦,游戏资讯类的)