UIWebView的使用

前言: UIWebView自iOS2就有，WKWebView从iOS8才有，毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存，且内存峰值更是夸张。WKWebView网页加载速度也有提升，但是并不像内存那样提升那么多。下面列举一些其它的优势： 

• 更多的支持HTML5的特性
• 官方宣称的高达60fps的滚动刷新率以及内置手势
• Safari相同的JavaScript引擎
• 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)
• 另外用的比较多的，增加加载进度属性:estimatedProgress

##一.UIWebView的简单使用

• UIWebView使用非常简单，可以分为三步，也是最简单的用法，显示网页

 // 1.创建webview，并设置大小，"20"为状态栏高度
  UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];
 // 2.创建请求
  NSMutableURLRequest *request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://www.cnblogs.com/mddblog/"]];
 // 3.加载网页
  [webView loadRequest:request];
 // 最后将webView添加到界面
  [self.view addSubview:webView];

• UIWebView不仅可以加载HTML页面，还支持pdf、word、txt、各种图片等等的显示。下面以加载mac桌面上的png图片：/Users/Cola/Desktop/bigIcon.png为例

// 1.获取url
NSURL *url = [NSURL fileURLWithPath:@"/Users/Cola/Desktop/bigIcon.png"];
// 2.创建请求
NSURLRequest *request=[NSURLRequest requestWithURL:url];
// 3.加载请求
[self.webView loadRequest:request];

##二.UIWebView的属性和方法

 //webView的代理
@property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;
 //内部的scrollView
@property (nonatomic, readonly, strong) UIScrollView *scrollView NS_AVAILABLE_IOS(5_0);

//三个加载的方法
- (void)loadRequest:(NSURLRequest *)request; //UIWebView加载资源最常用的一种方式，直接给出URL进行加载
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; //UIWebView加载资源第二种方式，将本地html文件内容嵌入到WebView
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL; //UIWebView加载资源第三种方式 将本地数据转化为NSData嵌入到webView

//URL请求对象
@property (nullable, nonatomic, readonly, strong) NSURLRequest *request;

- (void)reload; //刷新
- (void)stopLoading; //停止刷新
- (void)goBack; //后退
- (void)goForward; //前进

@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;//是否可以后退
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;//是否可以前进
@property (nonatomic, readonly, getter=isLoading) BOOL loading;//是否正在加载

//原生调用js:这个方法需要等到webView加载完毕之后才会调用，通过它我们可以很方便的操作UIWebView中的页面元素。参数script用来传进当前页面文件元素字符串，对传进来的字符串进行相应的操作，例如[webview stringByRvaluaingJavaScriptFromString:@“document.title”]，可以得到页面的title
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

//是否让内容伸缩至适应屏幕当前尺寸
@property (nonatomic) BOOL scalesPageToFit;
//这个属性如果设置为YES，当进入到页面视图可以自动检测电话号码，让用户可以单机号码进行拨打，不过现已弃用
@property (nonatomic) BOOL detectsPhoneNumbers NS_DEPRECATED_IOS(2_0, 3_0);
//这个属性可以设定使电话号码，网址，电子邮件和符合格式的日期等文字变为链接文字
@property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0);
//这个属性决定了页面用内嵌HTML5播放视频还是用本地的全屏控制。为了内嵌视频播放，不仅仅需要在这个页面上设置这个属性，还需要在HTML的viedeo元素必须包含webkit-playsinline属性。默认iPhone为NO，iPad为YES。
@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); // iPhone Safari defaults to NO. iPad Safari defaults to YES
//这个属性决定了HTML5视频可以自动播放还是需要用户启动播放。iPhone和iPad默认都是YES
@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0); // iPhone and iPad Safari both default to YES
//这个属性决定了从这个页面是否可以Air Play。iPhone和iPad上都是默认YES。
@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0); // iPhone and iPad Safari both default to YES
//这个值决定了网页内容的渲染是否在把内容全部加载到内存中再去处理。如果设置为YES，只有网页内容加载到内存里了才会去渲染。默认为NO。
@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0); // iPhone and iPad Safari both default to NO
//这个属性如果设置为YES，用户必须明确的点击页面上的元素或者相关联的输入页面来显示键盘, 如果设置为NO，一个元素的焦点事件就会导致输入视图的显示和自动关联这个元素。
@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); // default is YES
//这个属性用来设置一种模式，当网页的大小超出view时，将网页以翻页的效果展示
@property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0);
//这个枚举决定了webView加载页面具有CSS属性时是使用页的样式还是以列的样式
@property (nonatomic) UIWebPaginationBreakingMode paginationBreakingMode NS_AVAILABLE_IOS(7_0);
//分页的长度
@property (nonatomic) CGFloat pageLength NS_AVAILABLE_IOS(7_0);
//多个页面之间差距值
@property (nonatomic) CGFloat gapBetweenPages NS_AVAILABLE_IOS(7_0);
//分页的个数
@property (nonatomic, readonly) NSUInteger pageCount NS_AVAILABLE_IOS(7_0);
//是否允许HTML5视屏以画中画形式播放
@property (nonatomic) BOOL allowsPictureInPictureMediaPlayback NS_AVAILABLE_IOS(9_0);
//是否允许按住链接就展示链接的预览
@property (nonatomic) BOOL allowsLinkPreview NS_AVAILABLE_IOS(9_0); // default is NO

##三.UIWebView的代理方法(UIWebViewDelegate)

API_DEPRECATED("No longer supported.", ios(2.0, 12.0));
// 是否允许加载网页，也可获取js要打开的url，通过截取此url可与js交互
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType(UIWebViewNavigationType)navigationType {
    NSString *urlString = [[request URL] absoluteString];
    urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    NSArray *urlComps = [urlString componentsSeparatedByString:@"://"];
    NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);
     //如果用户点击UIWebView页面中的链接，就跳至Safari中打开链接页面
    if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
        [[UIApplication sharedApplication] openURL:[request URL]];
        return NO;
     }
    return YES;
}
//已经开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSURLRequest *request = webView.request;
    NSLog(@"webViewDidStartLoad-url=%@--%@",[request URL],[request HTTPBody]);
}
//已经完成加载
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSURLRequest *request = webView.request;
    NSURL *url = [request URL];
    if ([url.path isEqualToString:@"/normal.html"]) {
        NSLog(@"isEqualToString");
    }
    NSLog(@"webViewDidFinishLoad-url=%@--%@",[request URL],[request HTTPBody]);
    NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);
}
//加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSURLRequest *request = webView.request;
    NSLog(@"didFailLoadWithError-url=%@--%@",[request URL],[request HTTPBody]);
}

##四.原生和js的交互 <1>原生调用js 使用 :

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

• 获取网页的title

// 获取网页的title
NSString *title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];

• 获取网页定位

 // 获取网页定位
 // 实现自动定位js代码, htmlLocationID为定位的位置(由js开发人员给出)，实现    自动定位代码，应该在网页加载完成之后再调用
NSString *javascriptStr = [NSString stringWithFormat:@"window.location.href = '#%@'",htmlLocationID];
// webview执行代码
[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];

• 去除网页标签

//很多时候，我们要对网页做一些编辑，比如加载一个网页后，个别原因，我们不想显示新闻的来源，如下图的新闻来源“新华网”. 那我们就可以使用js代码将这个标签去掉，且只留下时间。js代码的编写，根据火狐浏览器查看它的标签名称，然后做处理，如上图，具体代码如下：
- (void)deleteNewsSource {
    // 1.去掉页面标题
    NSMutableString *str = [NSMutableString string];
    // 去掉导航页，如果想把“腾讯新闻”导航栏一并去掉，就打开注释
//    [str appendString:@"document.getElementsByClassName('g-header')[0].style.display = 'none';"];
    // 来源
    [str appendString:@"if(document.getElementsByClassName('g-wrapper-author')[0].innerHTML.indexOf(' ') == -1){document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML}else{document.getElementsByClassName('g-wrapper-author')[0].innerHTML = document.getElementsByClassName('g-wrapper-author')[0].innerHTML.split(' ')[1];}"];
    // 执行js代码
    [_webView stringByEvaluatingJavaScriptFromString:str];
}

<2>js调用原生 js执行OC代码：js是不能执行oc代码的，但是可以变相的执行，js可以将要执行的操作封装到网络请求里面，然后oc拦截这个请求，获取url里面的字符串解析即可，这里用到代理协议这个方法:

// UIWebView加载任何一个页面之前都会调用其代理的这个方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 

使用举例: 方法，通过调用参数request对象的URL属性来获取关于本次请求的地址以及参数信息，因此可以通过js代码模拟一次特殊的网络请求来达到调用该代理方法的作用，并通过过滤“特殊的url”来达到有目的性的js代码调用native代码的效果。所谓的“特殊的url”主要的目的是达到一种标识的效果，我们可以规定url的scheme部分，如appscheme://appName?invokeMethodName=objcMethod&paramA=xxx;也可以在常规的url后面附加特殊的参数标识，如www.yoursite.com?objecMethodCallFlag=1&methodName=methodA&paramA=xxx。之后根据规定在代理方法中去相应的解析url并做出if else判断即可。常见的调用方式是动态添加一个隐藏的iframe标签到HTML页面，如下:

// js代码
function invokeObjc(url) {
    var iframe;
    iframe = document.createElement("iframe");
    iframe.setAttribute("src", url);
    iframe.setAttribute("style", "display:none;");
    document.body.appendChild(iframe);
    iframe.parentNode.removeChild(iframe);
}
 
var url = "appscheme://appName?invokeMethodName=objcMethod&paramA=xxx";
invokeObjc(url);
 
// OC代码
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request 
         navigationType:(UIWebViewNavigationType)navigationType
｛
    static NSString *callScheme = @"appscheme";
    static NSString *invokeMethodName = @"invokeMethodName";

    NSString *scheme = request.URL.scheme ;
    if ([callScheme isEqualToString:scheme]) {
        NSString *query = request.URL.query ;
        NSArray *arr = [query componentsSeparatedByString:@"&"];
        __block NSString *methodName = @"" ;
        NSMutableDictionary *params = [NSMutableDictionary new];
        // 未考虑参数的解码操作
        [arr enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
            NSArray *kv =[obj componentsSeparatedByString:@"="];
            if (kv) {
                if ([invokeMethodName isEqualToString: kv[0]]) {
                    methodName = kv[1];
                }else{
                    [params setObject:kv[1] forKey:kv[0]];
                }
            }
        }];
        // 获得方法名和参数之后，可以添加逻辑判断
        NSLog(@"%@",methodName);
        NSLog(@"%@",params);
        return NO ;
    }
    return YES ;
 ｝

##五.UIWebView的枚举

//webView中用户的行为
typedef NS_ENUM(NSInteger, UIWebViewNavigationType) {
    UIWebViewNavigationTypeLinkClicked, //用户点击一个链接
    UIWebViewNavigationTypeFormSubmitted, //用户提交一个表单
    UIWebViewNavigationTypeBackForward, //用户返回或者前进
    UIWebViewNavigationTypeReload, //用户点击重新加载
    UIWebViewNavigationTypeFormResubmitted, //用户重复提交表单
    UIWebViewNavigationTypeOther //其他行为
} API_UNAVAILABLE(tvos);
//这个属性用来设置一种模式，当网页的大小超出view时，将网页以翻页的效果展示
typedef NS_ENUM(NSInteger, UIWebPaginationMode) {
    UIWebPaginationModeUnpaginated,//不使用翻页效果 
    UIWebPaginationModeLeftToRight,//将网页超出部分分页，从左向右进行翻页
    UIWebPaginationModeTopToBottom,//将网页超出部分分页，从上向下进行翻页
    UIWebPaginationModeBottomToTop,//将网页超出部分分页，从下向上进行翻页
    UIWebPaginationModeRightToLeft//将网页超出部分分页，从右向左进行翻页
} API_UNAVAILABLE(tvos);
//这个枚举决定了webView加载页面具有CSS属性时是使用页的样式还是以列的样式
typedef NS_ENUM(NSInteger, UIWebPaginationBreakingMode) {
    UIWebPaginationBreakingModePage, //默认设置是这个属性，CSS属性以页样式
    UIWebPaginationBreakingModeColumn  //当UIWebPaginationBreakingMod设置这个属性的时候，这个页面内容CSS属性以column-break 代替page-breaking样式
} API_UNAVAILABLE(tvos);