隨說 : 最近有個需求,是將公司的一個內網的頁面巢狀在app中作為一個模組.這不是很簡單的webView請求一下就行了麼?其實內裡大有乾坤.自己也將思路整理一遍

UIWebView

UIWebView的基本使用方法 :

就這樣就已經整整個baidu的頁面展示到app上
下面我們看一下webView的屬性與方法

    UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = webView;
    NSURL *url = [NSURL
 
 URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

UIWebView的層級結構 :

UIWebView的類繼承關係

UIWebView的屬性 :

// 代理屬性 重點需要知道代理方法的使用
@property (nullable, nonatomic, assign) id <UIWebViewDelegate> delegate;

// 這個是webView內部的scrollView 只讀,但是利用這個屬性,設定scrollView的代理,就可以控制整個webView的滾動事件
 

@property(nonatomic, readonly, strong) UIScrollView *scrollView;

// webView的請求,這個屬性一般在整個載入完成後才能拿到
@property (nullable, nonatomic, readonly, strong) NSURLRequest *request;

// A Boolean value indicating whether the receiver can move backward. (read-only)
// If YES, able to move backward; otherwise, NO.
// 如果這個屬性為YES,才能後退
 

@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;

// A Boolean value indicating whether the receiver can move forward. (read-only)
// If YES, able to move forward; otherwise, NO.
// 如果這個屬性為YES,才能前進
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;

// A Boolean value indicating whether the receiver is done loading content. (read-only)
// If YES, the receiver is still loading content; otherwise, NO.
// 這個屬性很好用,如果為YES證明webView還在載入資料,所有資料載入完畢後,webView就會為No
@property (nonatomic, readonly, getter=isLoading) BOOL loading;

//A Boolean value determining whether the webpage scales to fit the view and the user can change the scale.
//If YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.
// YES代表網頁可以縮放,NO代表不可以縮放
@property (nonatomic) BOOL scalesPageToFit;

// 設定某些資料變為連結形式，這個列舉可以設定如電話號，地址，郵箱等轉化為連結
@property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0);

// iPhone Safari defaults to NO. iPad Safari defaults to YES
// 設定是否使用內聯播放器播放視訊
@property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); 

// iPhone and iPad Safari both default to YES
// 設定視訊是否自動播放
@property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0); 

// iPhone and iPad Safari both default to YES
// 設定音訊播放是否支援ari play功能
@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0); 

// iPhone and iPad Safari both default to NO
// 設定是否將資料載入入記憶體後渲染介面
@property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0); 

// default is YES
// 設定使用者是否能開啟keyboard互動
@property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); 

/* IOS7 */ 以後的新特性
// 這個屬性用來設定一種模式，當網頁的大小超出view時，將網頁以翻頁的效果展示，列舉如下：
@property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0);
typedef NS_ENUM(NSInteger, UIWebPaginationMode) { 
UIWebPaginationModeUnpaginated, //不使用翻頁效果 
UIWebPaginationModeLeftToRight, //將網頁超出部分分頁，從左向右進行翻頁 
UIWebPaginationModeTopToBottom, //將網頁超出部分分頁，從上向下進行翻頁 
UIWebPaginationModeBottomToTop, //將網頁超出部分分頁，從下向上進行翻頁 
UIWebPaginationModeRightToLeft //將網頁超出部分分頁，從右向左進行翻頁 
};

// This property determines whether certain CSS properties regarding column- and page-breaking are honored or ignored. 
// 這個屬性決定CSS的屬性分頁是可用還是忽略。預設是UIWebPaginationBreakingModePage 
@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);

還有一些屬性請詳細翻蘋果文件

UIWebView的代理方法 :

UIWebView的代理方法是用的最多的方法,並且一般來說,相對Web頁面作處理都在這相應的4個方法中
分別解釋一下方法的呼叫情況

    // Sent before a web view begins loading a frame.請求傳送前都會呼叫該方法,返回NO則不處理這個請求
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

    // Sent after a web view starts loading a frame. 請求傳送之後開始接收響應之前會呼叫這個方法
    - (void)webViewDidStartLoad:(UIWebView *)webView;

    // Sent after a web view finishes loading a frame. 請求傳送之後,並且伺服器已經返回響應之後呼叫該方法
    - (void)webViewDidFinishLoad:(UIWebView *)webView;

    // Sent if a web view failed to load a frame. 網頁請求失敗則會呼叫該方法
    - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

UIWebView的物件方法

// 載入Data資料建立一個webView
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingName baseURL:(NSURL *)baseURL

// 載入本地HTML建立一個webView
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL

// 載入一個請求建立一個webView
- (void)loadRequest:(NSURLRequest *)request

// 重新整理網頁
- (void)reload;

// 停止網頁載入內容
- (void)stopLoading;

// 後退
- (void)goBack;

// 前進
- (void)goForward;

// 執行JS方法
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

---

---

---

---

---

---

WKWebView

WKWebView的簡介 :

從文件中可以看到,這個是IOS8之後新增的一個類,也是蘋果推崇的一個新的類

WKWebView的類層級結構

WKWebView的基本使用方法 :

其實和UIWebView的用法沒什麼區別
但是WKWebView相對於UIWebView強大了很多，記憶體的消耗相對少了，所提供的介面也豐富了。
推薦使用
多了一部操作就是需要包含webkit框架
@import webkit

    WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = webView;
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

WKWebView的屬性 :

// UIWebView 中會自動儲存Cookie，如果登入了一次下次再次進入的時候,會記住登入狀態
// 在WKWebView中，新增一個configuration屬性,  configuration 讓WKWebView知道登入狀態，
// configuration 可以通過已有的Cookie進行設定，也可以通過儲存上一次的configuration進行設定
// WKWebViewConfiguration類中也有一些相應的屬性
@property (nonatomic, readonly, copy) WKWebViewConfiguration *configuration;

// The methods of the WKNavigationDelegate protocol help you track the progress of the web site's main frame navigations and decide load policy for main frame and subframe navigations.
// WKWebView中,加入了網站導航的概念,這個物件決定主框架導航載入方法協議。
@property (nullable, nonatomic, weak) id <WKNavigationDelegate> navigationDelegate;

// The WKUIDelegate class provides methods for presenting native user interface 
elements on behalf of a webpage.
// WKWebView中,加入了網站視窗的概念,這個物件決了webView視窗的一些方法協議。
@property (nullable, nonatomic, weak) id <WKUIDelegate> UIDelegate;

A WKBackForwardList object is a list of webpages previously visited in a web view that can be reached by going back or forward.
// WKWebView中,加入了網站列表的概念,這個WEBBackForwardList物件是以前在Web檢視訪問的網頁，可以通過去後退或前進
@property (nonatomic, readonly, strong) WKBackForwardList *backForwardList;

還有很多方法,同樣可以查文件看到

WKWebView的代理方法 :

有一些方法和UIWebView是基本一直的,但是因為返回了navigation,所能用到的屬性多了很多,另外多了一些方法,將請求與相應的整個過程

- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView{
    NSLog(@"webViewWebContentProcessDidTerminate:  當Web檢視的網頁內容被終止時呼叫。");
}


- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
    NSLog(@"webView:didFinishNavigation:  響應渲染完成後呼叫該方法   webView : %@  -- navigation : %@  \n\n",webView,navigation);
}


- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation
{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
    NSLog(@"webView:didStartProvisionalNavigation:  開始請求  \n\n");
}

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSLog(@"webView:didCommitNavigation:   響應的內容到達主頁面的時候響應,剛準備開始渲染頁面應用 \n\n");
}


// error
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
    // 類似 UIWebView 的- webView:didFailLoadWithError:

    NSLog(@"webView:didFailProvisionalNavigation:withError: 啟動時載入資料發生錯誤就會呼叫這個方法。  \n\n");
}



- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
    NSLog(@"webView:didFailNavigation: 當一個正在提交的頁面在跳轉過程中出現錯誤時呼叫這個方法。  \n\n");
}



- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

    NSLog(@"請求前會先進入這個方法  webView:decidePolicyForNavigationActiondecisionHandler: %@   \n\n  ",navigationAction.request);

    decisionHandler(WKNavigationActionPolicyAllow);

}

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{

    NSLog(@"返回響應前先會呼叫這個方法  並且已經能接收到響應webView:decidePolicyForNavigationResponse:decisionHandler: Response?%@  \n\n",navigationResponse.response);

    decisionHandler(WKNavigationResponsePolicyAllow);
}



- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{

    NSLog(@"webView:didReceiveServerRedirectForProvisionalNavigation: 重定向的時候就會呼叫  \n\n");
}

WKWebView的物件方法 :

這些方法,基本上和UIWebView中的使用用法是一致的,所以

// 這是載入網頁最常用的一種方式，通過一個網頁URL來載入一個WKWebView，這個URL可以是遠端的也可以是本地的，例如我載入百度的主頁
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;

// 根據一個檔案,載入一個WKWebView
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL NS_AVAILABLE(10_11, 9_0);

// 這個方法需要將html檔案讀取為字串從而載入為WKWebView，其中baseURL是我們自己設定的一個路徑，用於尋找html檔案中引用的圖片等素材。
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

// 這個方式使用的比較少，但也更加自由，其中data是檔案資料，MIMEType是檔案型別，characterEncodingName是編碼型別，baseURL是素材資源路徑
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL NS_AVAILABLE(10_11, 9_0);

基本使用

下面會總結一些我在開發過程中遇到的坑,和解決問題的一些思路,不過在此之前我發現,如果要webView玩得好,有以下幾點的只是也需要掌握好,因為我認為在H5崛起的今天,源生App和H5的互動之間會產生比較大改變,而且源生與H5之間的混編,越來越被重視.所以 :

1. 源生技術,特別是有關於webView這一塊的API要非常熟練,
2. js語法, js的語法需要熟練,特別是操作document的幾個常用js,標籤需要用得滾瓜爛熟.
3. 要非常瞭解網路請求 - 響應的機制,理解請求頭,響應頭,等等.HTTP的整套協議

需求一 : 展示一個網頁,但是需要隱藏一部分頁面

首先看看百度的頁面,這是用Chrome瀏覽器開啟的開發者模式
基本介面組成如下,基本使用用法請詳情百度,這裡不作介紹

假設現在想將這個Logo由網頁開始載入就去掉

百度的logo就是一個div套著一個image標籤

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 在HTML標籤都載入完成後,開始處理HTML標籤,呼叫JS,操作document
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('plus-card').remove();"];
}

就這樣, logo標籤就被去掉了,思路就是等HTML載入完成後,操作JS從而操作document標籤從而改變整個html頁面的應用,下圖是去掉整個Body主題內容後的結果

另外還可以將一段函式封裝到裡面,執行函式,原理是通過stringByEvaluatingJavaScriptFromString將JS函式寫進head標籤中,然後再呼叫該函式

// 自定義editMyLogo函式
[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function editMyLogo() { "
     "var logo = document.getElementById('logo');"
     "logo.innerHTML= logo.innerHTML + '這是我自己定義的名字';"
     "var imglist = logo.getElementsByTagName('IMG');"
     "for (i=0 ; i < imglist.length ; i++ ){"
     "imglist[i].src = 'http://pic.to8to.com/attch/day_160218/20160218_d968438a2434b62ba59dH7q5KEzTS6OH.png';"
     "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];

    // 執行editMyLogo函式
    [webView stringByEvaluatingJavaScriptFromString:@"editMyLogo();"];

效果如下 :

有幾點問題,這種操作是在webViewDidFinishLoad方法下進行的,webViewDidFinishLoad方法是webView的document已經渲染好後,再去處理這個這個頁面.

1. 你會發現有時候會出現一些閃屏現象,原因是渲染過後,內部處理JS程式碼後,頁面會再渲染一次
2. 資源浪費,假設這邊的需求只需要顯示10%的內容,卻要載入100%的內容,不過這一方面還需要網頁端作出很好的適配
3. 某些時候,JS會失效,不知道什麼原因,有些時候自定義載入的JS的方法並沒有執行到.等於內容並沒有遮蔽
4. 等等..

需求二 : 怎樣處理403,404的情況 ?

@property (nonatomic, assign) BOOL isPost; // 定義一個變數

// 每一個請求開始傳送前都會呼叫這個方法
// 1, 定義一個全域性變數currentRequest,用作儲存當前的請求
// 2, 將請求轉換成data,然後處理data再將data作為請求資料再次請求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    if (!_isPost) {
        NSHTTPURLResponse *response = nil;
        NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:&response error:nil];
        if (response.statusCode == 404) {
            // 這裡處理 404 程式碼
        } else if (response.statusCode == 403) {
            // 這裡處理 403 程式碼
        } else {

            _isPost = true;
            [webView loadData:data MIMEType:@"text/html" textEncodingName:@"NSUTF8StringEncoding" baseURL:[request URL]];

        }
        return NO;
    }else{
        NSLog(@"\n\n shouldStartLoadWithRequest請求準備 --  %@ \n\n ",request);
        _isPost = NO;
        return YES;
    }
}

需求一 : 進一步改進

在處理HTML這裡,將你想隱藏的頁面,加上 display:none 屬性,
或者,將整段HTML標籤去掉.

---

文／travin（簡書作者）
原文連結：http://www.jianshu.com/p/b3e7fa514ab7
著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。