UIWebView的相關(guān)原理以及基本使用

前言

仔細(xì)研究了一下項(xiàng)目, 項(xiàng)目中有很多地方都會(huì)用到網(wǎng)頁來展示界面, 所以, 提前研究一下UIWebView和WKWebView. 讓自己在使用的過程中盡量少走一些彎路. 本章主要介紹UIWebView, 至于WKWebView將會(huì)留到下一章重點(diǎn)介紹.
UIWebView的原理:
  • UIWebView加載內(nèi)容的三種方式:
  • 方式一: - (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加載本地文件可以使用加載數(shù)據(jù)的方式.
1. NSData 本地文件對(duì)應(yīng)的數(shù)據(jù)
2. MIMEType
3. 編碼格式字符串
4. 相對(duì)地址，一般加載本地文件不使用，可以在指定的baseURL中查找相關(guān)文件

如果要用UIWebView顯示對(duì)應(yīng)的文件，必須知道準(zhǔn)確的MIMEType
但是，不是所有格式的文件都可以通過本地?cái)?shù)據(jù)的方式加載，即便是知 道MIMEType

  • UIWebView的優(yōu)劣勢(shì)

    • 優(yōu)勢(shì): UIWebView可以跨平臺(tái)使用, 并且只要審批過后, 以后就不需要審批了, 以后只需要在后臺(tái)維護(hù)即可.

  • 劣勢(shì): 性能不好, 不能使用手勢(shì)等方法.

  • 在開發(fā)中經(jīng)常會(huì)用到的方法

// 三個(gè)加載UIWebView的方法
loadRequest:  
loadHTMLString:baseURL:  
loadData:MIMEType:textEncodingName:baseURL:

// 常用到的導(dǎo)航方法
goBack: 表示回退到上一頁
goForward: 表示前進(jìn)到下一頁
reload: 表示重載
stopLoading: 表示取消載入內(nèi)容

// 常見屬性
 // 自動(dòng)對(duì)頁面進(jìn)行縮放, 主要目的是適應(yīng)不同屏幕
 webView.scalesPageToFit = YES;

dataDetectorTypes - 設(shè)定電話號(hào)碼、網(wǎng)址、電子郵件和日期等文字變?yōu)殒溄游淖? 
 // 自動(dòng)檢測(cè)頁面上的特殊功能

 UIDataDetectorTypePhoneNumber          檢測(cè)手機(jī)號(hào), 點(diǎn)擊可以打電話
 UIDataDetectorTypeLink                 檢測(cè)頁面上的鏈接, 點(diǎn)擊有響應(yīng)
 UIDataDetectorTypeAddress
 UIDataDetectorTypeNone                 不用檢測(cè)
 UIDataDetectorTypeAll                  檢測(cè)所有
webView.dataDetectorTypes  = UIDataDetectorTypeAll;

瀏覽器通過MIME標(biāo)志符可以知道使用哪種插件讀取相關(guān)文件  
iOS可以直接調(diào)用js代碼與頁面通訊

注意: 值得注意的一點(diǎn): UIWebView協(xié)議中的方法, 第一個(gè)參數(shù)都是指向了webView的一個(gè)指針, 所以我們可以使用一個(gè)代理用于多個(gè)網(wǎng)頁

代理方法
 代理方法一:
 //當(dāng)網(wǎng)頁視圖被指示載入內(nèi)容而得到通知。應(yīng)當(dāng)返回YES，這樣會(huì)進(jìn)行加載。通過導(dǎo)航類型參數(shù)可以得到請(qǐng)求發(fā)起的原因，可以是以下任意值：
 UIWebViewNavigationTypeLinkClicked
 
 UIWebViewNavigationTypeFormSubmitted
 
 UIWebViewNavigationTypeBackForward
 
 UIWebViewNavigationTypeReload
 
 UIWebViewNavigationTypeFormResubmitted
 
 UIWebViewNavigationTypeOther
 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
 {
 return YES;
 }
 

 代理方法二:
 // 當(dāng)網(wǎng)頁已經(jīng)加載一個(gè)內(nèi)容以后, 就會(huì)得到通知, 調(diào)用該方法
 - (void)webViewDidStartLoad:(UIWebView *)webView
 {
 //    [webView stopLoading];  // 表示取消繼續(xù)載入內(nèi)容
 
 }
 


 代理方法三:
 -(void)webViewDidFinishLoad:(UIWebView*)webView ;//當(dāng)網(wǎng)頁視圖結(jié)束加載一個(gè)請(qǐng)求之后，得到通知。



 代理方法四: 
 -(void)webView:(UIWebView*)webView DidFailLoadWithError:(NSError*)error;//當(dāng)在請(qǐng)求加載中發(fā)生錯(cuò)誤時(shí)，得到通知。會(huì)提供一個(gè)NSSError對(duì)象，以標(biāo)識(shí)所發(fā)生錯(cuò)誤類型。
iOS開發(fā)中使用UIWebView時(shí)需要注意的幾點(diǎn):

  • 1, 與UIWebView進(jìn)行交互, 調(diào)用web頁面需要傳參的函數(shù)時(shí), 參數(shù)需要帶單引號(hào)或者雙引號(hào)(雙引號(hào)需要進(jìn)行轉(zhuǎn)義字符), 但是, 在傳Json字符串的時(shí)候是不需要帶單引號(hào)或者雙引號(hào)的.

  • 2, 只有WebView加載完畢之后, 才能調(diào)用頁面中對(duì)應(yīng)的JS方法

  • 3, 如果載入的內(nèi)容布局大于了手機(jī)尺寸, 可以通過webView.scalesPageToFit = YES;來適應(yīng)手機(jī)尺寸

常見例子
  • demo1: 加載網(wǎng)頁
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 = @"<html><head><title>Hello</title></head><body><h1>Hello</h1><ul><li>123</li><li>321</li><li>1234567</li></ul></body></html>";  
         
       // 部分html  
       NSString *str1 = @"<h1>Hello</h1><ul><li>123</li><li>321</li><li>1234567</li></ul>";  
       [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]);  
      
    // 以二進(jìn)制數(shù)據(jù)的形式加載沙箱中的文件  
    NSData *data = [NSData dataWithContentsOfFile:path];  
      
    [self.webView loadData:data MIMEType:@"application/pdf" textEncodingName:@"UTF-8" baseURL:nil];
  • demo4: 導(dǎo)航
    #pragma mark 后退  
    - (void)goBack  
    {  
        NSLog(@"后退");  
        [self.webView goBack];  
    }  
      
    #pragma mark 前進(jìn)  
    - (void)goForward  
    {  
        NSLog(@"前進(jìn)");  
        [self.webView goForward];  
    }  
      
    #pragma mark 刷新  
    - (void)refresh  
    {  
        NSLog(@"刷新");  
        [self.webView reload];  
    }
  • demo5: UIWebView調(diào)用JS
    // 獲取當(dāng)前頁面的url  
    NSString *url = [_webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];  
    NSLog(@"url %@", url);  
      
    // 獲取當(dāng)前頁面的標(biāo)題  
    NSString *title = [_webView stringByEvaluatingJavaScriptFromString:@"document.title"];  
    NSLog(@"title %@", title);  
      
    // 提交表單  
    [_webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit(); "];
  • 修改UIWebView中的字體相關(guān)
//  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];  
}
關(guān)于html的拓展(調(diào)用js)

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

UIWebView的緩存問題

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

總結(jié)

需要注意的是使用UIWebView相對(duì)來說性能不是很好. 所以, 官方才會(huì)在iOS8.0推出WKWebView來代替.所以用的時(shí)候需要注意性能的優(yōu)化.
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • IOS之UIWebView的使用 剛接觸IOS開發(fā)1年多，現(xiàn)在對(duì)于 混合式 移動(dòng)端開發(fā)越來越流行，因?yàn)殚_發(fā)成本上、...
    學(xué)無止境666閱讀 46,009評(píng)論 5贊 53
  • http://www.cnblogs.com/mddblog/p/5281748.html 一、整體介紹 UIWe...
    F麥子閱讀 1,328評(píng)論 0贊 2
  • OS之UIWebView的使用 剛接觸IOS開發(fā)1年多，現(xiàn)在對(duì)于 混合式 移動(dòng)端開發(fā)越來越流行，因?yàn)殚_發(fā)成本上、速...
    知之未道閱讀 1,711評(píng)論 0贊 4
  • 一、WebView WebView就是一個(gè)內(nèi)嵌瀏覽器控件，在iOS中主要有兩種WebView：UIWebView和...
    iOS祎閱讀 1,245評(píng)論 0贊 2
  • 一、初始化（省略） 二、加載數(shù)據(jù)的三種方式: 1.-(void)loadRequest:(NSURLRequest...
    1d2c9b77769c閱讀 3,728評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容