WebView

一、WebView

WebView就是一個內嵌瀏覽器控件,在iOS中主要有兩種WebView:UIWebViewWKWebView,UIWebView是iOS2之后開始使用,WKWebView是在iOS8開始使用,毫無疑問WKWebView將逐步取代笨重的UIWebView。

WKWebView的優點:

WKWebView更多的支持HTML5的特性

WKWebView更快,占用內存可能只有UIWebView的1/3 ~ 1/4

WKWebView高達60fps的滾動刷新率和豐富的內置手勢

WKWebView具有Safari相同的JavaScript引擎

WKWebView增加了加載進度屬性

盡管講了這么多WKWebView的優點,但還有很多項目還沒有升級到iOS8,UIWebView也還有學習的必要,也可以通過對比WKWebView和UIWebView的使用,加深理解。

注意:Xcode7禁用了明碼的HTTP請求(但不限HTTPS請求),應該在info.plist里添加下面的字段,否則無法響應HTTP請求

添加App Transport Security Settings,并在其中設置Allow Arbitrary Loads為YES

xcode7設置HTTP請求

二、UIWebView

1. UIWebView加載請求

- (void)simpleUIWebViewTest {// 1.創建webview,并設置大小,"20"為狀態欄高度CGFloatwidth =self.view.frame.size.width;CGFloatheight =self.view.frame.size.height -20;UIWebView*webView = [[UIWebViewalloc] initWithFrame:CGRectMake(0,20, width, height)];// 2.創建URLNSURL*url = [NSURLURLWithString:@"http://www.baidu.com"];// 3.創建RequestNSURLRequest*request =[NSURLRequestrequestWithURL:url];// 4.加載網頁[webView loadRequest:request];// 5.最后將webView添加到界面[self.view addSubview:webView];self.webView = webView;}

2. UIWebView的實用加載函數

//加載網絡請求- (void)loadRequest:(NSURLRequest*)request;/*

功能:加載本地HTML字符串

string為要加載的本地HTML字符串

baseURL用來確定htmlString的基準地址,相當于HTML的標簽的作用,定義頁面中所有鏈接的默認地址

*/- (void)loadHTMLString:(NSString*)string baseURL:(nullableNSURL*)baseURL;/* 加載二進制數據 */- (void)loadData:(NSData*)data MIMEType:(NSString*)MIMEType? ? ? ? ? ? ? ? ? ? characterEncodingName:(NSString*)characterEncodingName? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? baseURL:(NSURL*)baseURL;

下面是加載HTML字符串的例子

- (void)loadLocalHTMLFileToUIWebView{// 獲取本地html文件文件路徑NSString*localHTMLPageName =@"myPage";NSString*path = [[NSBundlemainBundle] pathForResource:localHTMLPageName ofType:@"html"];// 從html文件中讀取html字符串NSString*htmlString = [NSStringstringWithContentsOfFile:path? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? encoding:NSUTF8StringEncodingerror:NULL];// 加載本地HTML字符串[self.webView loadHTMLString:htmlString baseURL:[[NSBundlemainBundle] bundleURL]];}

UIWebView不僅可以加載HTML頁面,還支持pdf、word、txt、各種圖片等等的顯示。使用loadRequest方法加載的URL是pdf、word、txt、各種圖片的URL路徑,就可以加載對應的文件,這里就不演示了。

3. UIWebView的網頁導航方法

我們瀏覽網頁,時常會使用到的刷新網頁、前進、后退等導航操作,UIWebView里面也有對應的操作方法。

#pragma mark - 判斷屬性// 是否可以后退@property(nonatomic,readonly,getter=canGoBack)BOOLcanGoBack;// 是否可以向前@property(nonatomic,readonly,getter=canGoForward)BOOLcanGoForward;// 是否正在加載@property(nonatomic,readonly,getter=isLoading)BOOLloading;#pragma mark - 操作方法// 刷新網頁- (void)reload;// 停止加載網頁- (void)stopLoading;// 后退- (void)goBack;// 前進- (void)goForward;

4. UIWebViewDelegate代理方法

一共有四個方法:

//是否允許加載網頁,也可獲取js要打開的url,通過截取此url可與js交互-(BOOL)webView:(UIWebView*)webViewshouldStartLoadWithRequest:(NSURLRequest*)requestnavigationType:(UIWebViewNavigationType)navigationType;//開始加載網頁-(void)webViewDidStartLoad:(UIWebView*)webView;//網頁加載完成-(void)webViewDidFinishLoad:(UIWebView*)webView;//網頁加載錯誤-(void)webView:(UIWebView*)webViewdidFailLoadWithError:(NSError*)error;

5. UIWebView和JavaScript交互的方法

主要有兩方面:JS執行OC代碼、OC調取寫好的JS代碼

JS執行OC代碼:

JS是不能執行OC代碼的,但是可以變相的執行,JS可以將要執行的操作封裝到網絡請求里面,然后OC攔截這個請求,獲取URL里面的字符串解析即可,這里用到代理協議里面的一個方法

-(BOOL)webView:(UIWebView *)webView? ? shouldStartLoadWithRequest:(NSURLRequest *)request? ? ? ? ? ? ? ? navigationType:(UIWebViewNavigationType)navigationType

OC調取寫好的JS代碼:

用到WebView的一個方法stringByEvaluatingJavaScriptFromString

// 實現自動定位JS代碼, htmlLocationID為定位的位置(由JS開發人員給出),實現自動定位代碼,應該在網頁加載完成之后再調用NSString*javascriptStr = [NSStringstringWithFormat:@"window.location.href = '#%@'",htmlLocationID];// webview執行代碼[self.webView stringByEvaluatingJavaScriptFromString:javascriptStr];// 獲取網頁的titleNSString*title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];

6. UIWebView整合功能代碼

- (void)viewDidLoad{? ? [superviewDidLoad];? ? [selfinitWebView];}- (void)initWebView{// 1.創建webview,并設置大小,"20"為狀態欄高度CGFloatwidth =self.view.frame.size.width;CGFloatheight =self.view.frame.size.height -20;UIWebView*webView = [[UIWebViewalloc] initWithFrame:CGRectMake(0,20,width,height)];// 2.創建URLNSURL*url = [NSURLURLWithString:@"http://www.baidu.com"];// 3.創建RequestNSURLRequest*request =[NSURLRequestrequestWithURL:url];// 4.加載網頁[webView loadRequest:request];// 5.最后將webView添加到界面[self.view addSubview:webView];self.webView = webView;? ? webView.delegate =self;}#pragma mark 設置前進后退按鈕狀態-(void)setBarButtonStatus{if(_webView.canGoBack) {? ? ? ? _barButtonBack.enabled =YES;? ? }else{? ? ? ? _barButtonBack.enabled =NO;? ? }if(_webView.canGoForward){? ? ? ? _barButtonForward.enabled =YES;? ? }else{? ? ? ? _barButtonForward.enabled =NO;? ? }}/*瀏覽器后退*/- (void)clickGoBackBtn{if(self.webView.canGoBack){? ? ? ? ? ? [self.webView goBack];? ? }}/*瀏覽器前進*/- (void)clickGoForwardBtn{if(self.webView.canGoForward){? ? ? ? ? ? [self.webView goForward];? ? }}#pragma mark - UIWebViewDelegate代理方法#pragma mark 開始加載//是否允許加載網頁,也可獲取js要打開的url,通過截取此url可與js交互- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? navigationType:(UIWebViewNavigationType)navigationType{//截取URL,這里可以和JS進行交互,但這里沒有寫,因為會涉及到JS的一些知識,增加復雜性NSString*urlString = [request.URL absoluteString];? ? urlString = [urlString stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];NSArray*urlComps = [urlString componentsSeparatedByString:@"://"];NSLog(@"urlString=%@---urlComps=%@",urlString,urlComps);returnYES;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }//開始加載網頁- (void)webViewDidStartLoad:(UIWebView*)webView{//顯示網絡請求加載[UIApplicationsharedApplication].networkActivityIndicatorVisible =true;}//網頁加載完成- (void)webViewDidFinishLoad:(UIWebView*)webView{//隱藏網絡請求加載圖標[UIApplicationsharedApplication].networkActivityIndicatorVisible =false;? ? [selfsetBarButtonStatus];//取得html內容NSLog(@"%@",[self.webView stringByEvaluatingJavaScriptFromString:@"document.title"]);}//網頁加載錯誤- (void)webView:(UIWebView*)webView didFailLoadWithError:(NSError*)error{UIAlertView*alert = [[UIAlertViewalloc] initWithTitle:@"系統提示"message:@"網絡連接發生錯誤!"delegate:selfcancelButtonTitle:nilotherButtonTitles:@"確定",nil];? ? ? ? [alert show];}

三、WKWebView

終于輪到WKWebView這個以后時代的主角出場了。要使用WKWebView需要導入 框架,你可以明顯地從下面看出我對WKWebView和UIWebView的區別對待,O(∩_∩)O哈哈~

1. WKWebView加載請求

和UIWebView用法完全一致:

#pragma mark - WKWebView簡單使用- (void)wkWebViewEasyUse{//1.創建WKWebViewCGFloatwidth =self.view.frame.size.width;CGFloatheight =self.view.frame.size.height -20;WKWebView*webView = [[WKWebViewalloc] initWithFrame:CGRectMake(0,20,width,height)];//2.創建URLNSURL*URL = [NSURLURLWithString:@"http://www.baidu.com"];//3.創建RequestNSURLRequest*request = [NSURLRequestrequestWithURL:URL];//4.加載Request[webView loadRequest:request];//5.添加到視圖self.webView = webView;? ? [self.view addSubview:webView];}

WKWebView顯示圖

2. WKWebView的實用加載方法

UIWebView有的,WKWebView都有,WKWebView多了一個加載文件方法,而且WKWebView的這些加載方法都有返回值。

/*加載請求*/- (WKNavigation*)loadRequest:(NSURLRequest*)request;/*加載本地HTML字符串*/- (WKNavigation*)loadHTMLString:(NSString*)string? ? ? ? ? ? ? ? ? ? ? ? ? baseURL:(nullableNSURL*)baseURL;/*加載本地文件*/- (WKNavigation*)loadFileURL:(NSURL*)url? ? ? allowingReadAccessToURL:(NSURL*)url;/* 加載二進制數據 */- (WKNavigation*)loadData:(NSData*)data? ? ? ? ? ? ? ? ? MIMEType:(NSString*)MIMEType? ? ? characterEncodingName:(NSString*)characterEncodingName? ? ? ? ? ? ? ? ? ? baseURL:(NSURL*)baseURL;

loadHTMLString方法的顯示效果會有一些區別,看下圖:

上面的是UIWebView加載效果,下面的是WKWebView加載的效果

我的HTML文件myPage.html如下:

Kenshin Cui's BlogI am Kenshin Cui

iOS Learn

估計兩種WebView加載HTML的默認字體樣式是不一樣的,這里只是說一下

下面是加載本地文件的實例:

/* 模擬器調試加載mac本地文件 */- (void)loadLocalFile {// 1.創建webview,并設置大小,"20"為狀態欄高度CGFloatwidth =self.view.frame.size.width;CGFloatheight =self.view.frame.size.height -20;WKWebView*webView = [[WKWebViewalloc] initWithFrame:CGRectMake(0,20, width, height)];// 2.創建url? userName:電腦用戶名NSURL*url = [NSURLfileURLWithPath:@"/Users/userName/Desktop/bigIcon.png"];// 3.加載文件[webView loadFileURL:url allowingReadAccessToURL:url];// 最后將webView添加到界面[self.view addSubview:webView];}

模擬器加載本地文件效果圖

3. WKWebView的網頁導航方法

和UIWebView相差不大,多了返回值,多了一些屬性,也多了2個方法:

reloadFromOrigin,緩存加載

goToBackForwardListItem,跳轉到指定歷史頁面

下面是網頁導航方法列表:

@property(nonatomic,readonly)BOOLcanGoBack;@property(nonatomic,readonly)BOOLcanGoForward;@property(nonatomic,readonly,getter=isLoading)BOOLloading;- (WKNavigation*)goBack; - (WKNavigation*)goForward;- (WKNavigation*)reload; - (void)stopLoading;/* 加載進度,取值范圍0~1 */@property(nonatomic,readonly)doubleestimatedProgress;/* 是否允許左右劃手勢導航,默認不允許 */@property(nonatomic)BOOLallowsBackForwardNavigationGestures;/* 訪問歷史列表 */@property(nonatomic,readonly,strong)WKBackForwardList*backForwardList;/* 會比較網絡數據是否有變化,沒有變化則使用緩存,否則從新請求 */- (WKNavigation*)reloadFromOrigin;/* 比向前向后更強大,可以跳轉到某個指定歷史頁面 */- (WKNavigation*)goToBackForwardListItem:(WKBackForwardListItem*)item;

4. WKWebView的代理

UIWebView只有一個代理,但WKWebView有好幾個,但常用的有2個,

id navigationDelegate和id< WKUIDelegate > UIDelegate:

WKNavigationDelegate: 最常用,和UIWebViewDelegate功能類似,追蹤加載過程,有是否允許加載、開始加載、加載完成、加載失敗。

WKUIDelegate:UI界面相關,原生控件支持,三種提示框:輸入、確認、警告。

下面列出WKNavigationDelegate的常用代理方法

/* 1.在發送請求之前,決定是否跳轉? */-(void)webView:(WKWebView*)webViewdecidePolicyForNavigationAction:(WKNavigationAction*)navigationActiondecisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler;/* 2.頁面開始加載 */-(void)webView:(WKWebView*)webViewdidStartProvisionalNavigation:(WKNavigation*)navigation;/* 3.在收到服務器的響應頭,根據response相關信息,決定是否跳轉。 */-(void)webView:(WKWebView*)webViewdecidePolicyForNavigationResponse:(WKNavigationResponse*)navigationResponsedecisionHandler:(void(^)(WKNavigationResponsePolicy))decisionHandler;/* 4.開始獲取到網頁內容時返回,需要注入JS,在這里添加 */-(void)webView:(WKWebView*)webViewdidCommitNavigation:(WKNavigation*)navigation;/* 5.頁面加載完成之后調用 */-(void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation;/* error - 頁面加載失敗時調用 */-(void)webView:(WKWebView*)webViewdidFailProvisionalNavigation:(WKNavigation*)navigation;/* 其他 - 處理服務器重定向Redirect */-(void)webView:(WKWebView*)webViewdidReceiveServerRedirectForProvisionalNavigation:(WKNavigation*)navigation;

我們看看WKUIDelegate的幾個代理方法,雖然不是必須實現的,但是如果我們的頁面中有調用了JS的alert、confirm、prompt方法,我們應該實現下面這幾個代理方法,然后在這里調用iOS的彈出窗,因為使用WKWebView后,HTML中的alert、confirm、prompt方法調用是不會再彈出窗口了

下面列出WKUIDelegate的常用代理方法:

/* 輸入框,頁面中有調用JS的 prompt 方法就會調用該方法 */-(void)webView:(WKWebView*)webViewrunJavaScriptTextInputPanelWithPrompt:(NSString*)promptdefaultText:(nullableNSString*)defaultTextinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(NSString *result))completionHandler;/* 確認框,頁面中有調用JS的 confirm 方法就會調用該方法 */-(void)webView:(WKWebView*)webViewrunJavaScriptConfirmPanelWithMessage:(NSString*)messageinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(BOOL result))completionHandler;/* 警告框,頁面中有調用JS的 alert 方法就會調用該方法 */-(void)webView:(WKWebView*)webViewrunJavaScriptAlertPanelWithMessage:(NSString*)messageinitiatedByFrame:(WKFrameInfo*)framecompletionHandler:(void(^)(void))completionHandler;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、WKWebView簡介 在WWDC2014中,蘋果推出了最新的iOS8系統,其中也伴隨著很多控件的更新與升級。...
    雪上踏痕閱讀 2,076評論 1 0
  • UIWebView的基本了解 什么是UIWebView1.UIVebView是系統內置的瀏覽器控件2.系統自帶的s...
    Mario_ZJ閱讀 2,828評論 0 2
  • 前言 關于UIWebView的介紹,相信看過上文的小伙伴們,已經大概清楚了吧,如果有問題,歡迎提問。 本文是本系列...
    CoderLF閱讀 9,016評論 2 12
  • http://www.cnblogs.com/mddblog/p/5281748.html 一、整體介紹 UIWe...
    F麥子閱讀 1,262評論 0 2
  • 一、WebView WebView就是一個內嵌瀏覽器控件,在iOS中主要有兩種WebView:UIWebView和...
    執著丶執念閱讀 27,335評論 24 107