UIWebView的相关原理以及基本使用

前言

仔细研究了一下项目, 项目中有很多地方都会用到网页来展示界面, 所以, 提前研究一下UIWebView和WKWebView. 让自己在使用的过程中尽量少走一些弯路. 本章主要介绍UIWebView, 至于WKWebView将会留到下一章重点介绍.
UIWebView的原理:
  • UIWebView加载内容的三种方式:
  • 方式一: - (void)loadRequest:(NSURLRequest *)request;
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.delegate = self;
NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];

  • 方式二: - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
// 加载本地的html文件的两种常见方法:
 方法1: 
 NSString *resourcePath = [ [NSBundle mainBundle] resourcePath];
 NSString *filePath  = [resourcePath stringByAppendingPathComponent:@"text.html"];
 NSString *htmlstring =[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
 [self.webView loadHTMLString:htmlstring  baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle]  bundlePath]]];
 
方法2: 
 - (void)loadData:(NSData *)data MIMEType:(NSString *) MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
  • 注意:

webView加载本地文件可以使用加载数据的方式.
1. NSData 本地文件对应的数据
2. MIMEType
3. 编码格式字符串
4. 相对地址,一般加载本地文件不使用,可以在指定的baseURL中查找相关文件

如果要用UIWebView显示对应的文件,必须知道准确的MIMEType
但是,不是所有格式的文件都可以通过本地数据的方式加载,即便是知 道MIMEType

  • UIWebView的优劣势

    • 优势: UIWebView可以跨平台使用, 并且只要审批过后, 以后就不需要审批了, 以后只需要在后台维护即可.
  • 劣势: 性能不好, 不能使用手势等方法.

  • 在开发中经常会用到的方法

// 三个加载UIWebView的方法
loadRequest:  
loadHTMLString:baseURL:  
loadData:MIMEType:textEncodingName:baseURL:

// 常用到的导航方法
goBack: 表示回退到上一页
goForward: 表示前进到下一页
reload: 表示重载
stopLoading: 表示取消载入内容

// 常见属性
 // 自动对页面进行缩放, 主要目的是适应不同屏幕
 webView.scalesPageToFit = YES;

dataDetectorTypes - 设定电话号码、网址、电子邮件和日期等文字变为链接文字  
 // 自动检测页面上的特殊功能

 UIDataDetectorTypePhoneNumber          检测手机号, 点击可以打电话
 UIDataDetectorTypeLink                 检测页面上的链接, 点击有响应
 UIDataDetectorTypeAddress
 UIDataDetectorTypeNone                 不用检测
 UIDataDetectorTypeAll                  检测所有
webView.dataDetectorTypes  = UIDataDetectorTypeAll;

浏览器通过MIME标志符可以知道使用哪种插件读取相关文件  
iOS可以直接调用js代码与页面通讯   

注意: 值得注意的一点: UIWebView协议中的方法, 第一个参数都是指向了webView的一个指针, 所以我们可以使用一个代理用于多个网页

代理方法
 代理方法一:
 //当网页视图被指示载入内容而得到通知。应当返回YES,这样会进行加载。通过导航类型参数可以得到请求发起的原因,可以是以下任意值:
 UIWebViewNavigationTypeLinkClicked
 
 UIWebViewNavigationTypeFormSubmitted
 
 UIWebViewNavigationTypeBackForward
 
 UIWebViewNavigationTypeReload
 
 UIWebViewNavigationTypeFormResubmitted
 
 UIWebViewNavigationTypeOther
 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
 {
 return YES;
 }
 
 代理方法二:
 // 当网页已经加载一个内容以后, 就会得到通知, 调用该方法
 - (void)webViewDidStartLoad:(UIWebView *)webView
 {
 //    [webView stopLoading];  // 表示取消继续载入内容
 
 }
 

 代理方法三:
 -(void)webViewDidFinishLoad:(UIWebView*)webView ;//当网页视图结束加载一个请求之后,得到通知。


 代理方法四: 
 -(void)webView:(UIWebView*)webView DidFailLoadWithError:(NSError*)error;//当在请求加载中发生错误时,得到通知。会提供一个NSSError对象,以标识所发生错误类型。
iOS开发中使用UIWebView时需要注意的几点:
  • 1, 与UIWebView进行交互, 调用web页面需要传参的函数时, 参数需要带单引号或者双引号(双引号需要进行转义字符), 但是, 在传Json字符串的时候是不需要带单引号或者双引号的.

  • 2, 只有WebView加载完毕之后, 才能调用页面中对应的JS方法

  • 3, 如果载入的内容布局大于了手机尺寸, 可以通过webView.scalesPageToFit = YES;来适应手机尺寸

常见例子
  • demo1: 加载网页
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
 webView.delegate = self;
 NSURL *url = [NSURL URLWithString:@"http://www.baidu.com"];
 NSURLRequest *request = [NSURLRequest requestWithURL:url];
  • demo2: 加载html字符串
    // HTML5  
       // 直接加载HTML字符串,完整的html  
       NSString *str = @"Hello

Hello

  • 123
  • 321
  • 1234567
"; // 部分html NSString *str1 = @"

Hello

  • 123
  • 321
  • 1234567
"; [self.webView loadHTMLString:str1 baseURL:nil];
  • demo3: 加载pdf文件
NSString *path = [[NSBundle mainBundle]pathForResource:@"iOS7Cookbook.pdf" ofType:nil];  
    NSURL *url = [NSURL fileURLWithPath:path];  
      
    NSLog(@"%@", [self mimeType:url]);  
      
    // 以二进制数据的形式加载沙箱中的文件  
    NSData *data = [NSData dataWithContentsOfFile:path];  
      
    [self.webView loadData:data MIMEType:@"application/pdf" textEncodingName:@"UTF-8" baseURL:nil]; 
  • demo4: 导航
    #pragma mark 后退  
    - (void)goBack  
    {  
        NSLog(@"后退");  
        [self.webView goBack];  
    }  
      
    #pragma mark 前进  
    - (void)goForward  
    {  
        NSLog(@"前进");  
        [self.webView goForward];  
    }  
      
    #pragma mark 刷新  
    - (void)refresh  
    {  
        NSLog(@"刷新");  
        [self.webView reload];  
    }  
  • demo5: UIWebView调用JS
    // 获取当前页面的url  
    NSString *url = [_webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];  
    NSLog(@"url %@", url);  
      
    // 获取当前页面的标题  
    NSString *title = [_webView stringByEvaluatingJavaScriptFromString:@"document.title"];  
    NSLog(@"title %@", title);  
      
    // 提交表单  
    [_webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];  
  • 修改UIWebView中的字体相关
//  1,
    - (void)webViewDidFinishLoad:(UIWebView *)webView方法中加入js代码  
        NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '60%'";  
        [_webView stringByEvaluatingJavaScriptFromString:str];  

// 2, 

    NSString *jsString = [[NSString alloc] initWithFormat:@"document.body.style.fontSize=%f;document.body.style.color=%@",fontSize,fontColor];   
            [webView stringByEvaluatingJavaScriptFromString:jsString];

// 3, 
    NSString *js_fit_code = [NSString stringWithFormat:@"var meta = document.createElement('meta');"  
                                 "meta.name = 'viewport';"  
                                 "meta.content = 'width=%f, initial-scale=%f, minimum-scale=0.1,maximum-scale=1.0, user-scalable=yes';"  
                                 "document.getElementsByTagName('head')[0].appendChild(meta);",_webView.frame.size.width,_webView.frame.size.width/1000];  
       
        [_webView setScalesPageToFit:YES];  
}

关于html的拓展(调用js)

原文地址: http://blog.csdn.net/duzixi/article/details/36047201

UIWebView的缓存问题

原文地址: https://github.com/slipawayleaon/iOS-UIWebView-LocalCache

总结

需要注意的是使用UIWebView相对来说性能不是很好. 所以, 官方才会在iOS8.0推出WKWebView来代替.所以用的时候需要注意性能的优化.

你可能感兴趣的:(UIWebView的相关原理以及基本使用)