iOS中WebView的基本應用
簡介(introduction)
今天完成了對iOS中的WebViewController的基本操作方法的學習，主要學習並且運用瞭如下幾個功能：
1. 利用WebViewController讀取本地的HTML檔案；
2. 利用WebViewController讀取本地網頁檔案的資料；
3. 利用WebViewController通過通訊讀取URL進行網頁請求，讀取極客學院的網頁內容。
Today,I have learned about the fundamental operation of the WebViewController in the iOS programing.What I mainly study and practice are the three functions as follow:
1. Using the WebViewController to load the local HTML file.
2. Using the WebViewController to load the data of the loacl web pages.
3. Using the WebViewController load URL for request to the website - “www.jikexueyuan.com” and read it’s content by network communication.
本次學習的專案基本的頁面設計如下：
As follow,this is the UI design of this project in this studying.
對應設計(Corresponding Design)
根據我們所需要的功能和粗略的頁面設計，我們需要將WebView進行關聯變數,將整個View關聯到WebViewController類上。我們還需要設計並關聯控制元件以下三個方法來完成我們的工作。：
According to our demands of function and the sketchy page design,we need to contact WebView to a variable as well as contact the whole View to the WebViewController class which we define by myself.Further more,we need to design three methods as follow to get our work done well.Undoubtedly , we need to contact them with three button controllers:
1. testLoadHTMLString；
2. testLoadData；
3. testLoadRequest；
具體的我們就來看看我們的WebViewController.h檔案中的定義：
As we can see some details in WebViewController.h:
//
// WebViewController.h
// TextView
//
// Created by 趙天宇 on 15/5/19.
// Copyright (c) 2015年 Panda. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface WebViewController : UIViewController<UIWebViewDelegate>
//繼承UIWebViewDelegate協議來監聽該WebView的生命週期以及處理一些活動。
//In order to monitor the life cycle of the WebView and hand on some activitys,WebViewController inherit the UIWebViewDelegate protocol. 有了相關的標頭檔案的定義的工作之後，我們需要來實現我們所定義的函式，具體的內容我們就可以在WebViewController.m檔案中實現我們的方法：
After we have defined the methods we want,we should achieve them.WebViewController.m is the fitful place which we can do our job in:
//
// WebViewController.m
// TextView
//
// Created by 趙天宇 on 15/5/19.
// Copyright (c) 2015年 Panda. All rights reserved.
//
#import "WebViewController.h"
@implementation WebViewController
- (IBAction)testLoadHTMLString:(id)sender {
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"Mycat(Whole)/index" ofType:@"html"];
//定義一個控制代碼來獲取本地中的網頁檔案
//Defining a Bundle to get the information in local HTML file.
NSURL *bundleUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
//定義一個URL的控制代碼來將本地的檔案轉換為可以使用來讀取資訊的URL
//Defining a URL Bundle to transform local file path in to a URL path which can be loaded by WebView.
NSError *error = nil;
//不進行出錯處理
//If there are some error,we do noting for that.
NSString *html = [[NSString alloc] initWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:&error];
//讀取HTML中的檔案內容用來展示，並且設定字元編碼和錯誤處理機制。
//Reading the content of HTML file to show as well as seting the character encoding and the mechanism of error processing.
if (error == nil) {
[self.webView loadHTMLString:html baseURL:bundleUrl];
//如果沒有出現錯誤的情況下就將已經讀取到的內容通過WebView傳入可見檢視當中展示
//If there is no mistake , we will transfer the content have loaded from files to WebViewCotorller.
}
}
- (IBAction)testLoadData:(id)sender {
//讀取本地網頁檔案中的資料（如果存在的話），具體操作流程和讀取HTML檔案的內容類似。
//Reading the data of the Web files(if exist),the specific process of this method is just like testLoadHTMLString.
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"Mycat(Whole)/index" ofType:@"html"];
NSURL *bundleUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSError *error = nil;
NSString *html = [[NSString alloc] initWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:&error];
if (error == nil) {
[self.webView loadHTMLString:html baseURL:bundleUrl];
}
}
- (IBAction)testLoadRequest:(id)sender {
//通過同步或者非同步請求，利用URL來獲得HTML等網頁程式碼來展示某個網頁的內容。
//Using URL to load the contents of the Web page by synchronous or asynchronous request and show them in the WebView.
NSURL *url = [NSURL URLWithString:@"http://www.jikexueyuan.com"];
//定義一個NSURL來獲取我們需要獲取的網頁的內容。
//Definge a NSURL to collect key information we need in some Web pages.
NSURLRequest *request = [NSURLRequest requestWithURL:url];
//利用URl來進行網路通訊
//Using URL to achieve network conmmunication.
[self.webView loadRequest:request];
//將通訊獲得的內容傳入WebView來展示
//Put the result of network conmmunication into the WebView.
self.webView.delegate = self;
//監聽WebView的執行狀態，並在某些某些狀態下來完成一些內部監聽操作。
//Moniterint the runing position of the WebView,setting some inner operation in some status.
}
#pragma mark -UIWebViewDelegate協議方法
-(void)webViewDidFinishLoad:(UIWebView *) webView{
//在WebView完成通訊並讀取網頁之後的監聽狀態。
//After network conmmunication has finished,we need to moniter the position.
NSLog(@"%@",[webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]);
//輸出連通的網頁的HTML的程式碼。
//Output the HTML codes which belong to the pages we contact in console.
}
@end執行結果(Runing Result)
我們看完了程式碼，我們可以看看我們的程式執行效果是如何的，接下來我們來看看：
We have watched the code,so we can run this project to see what we have finished:
首先是我們來執行loadHTMLString：
Firstly let’s click the loadHTMLString button:
接下來我們可以看看執行loadData的結果：
Next let’s see the result of running loadData button:
接下來我們可以看看我們執行loadRequest的結果：
Lastly we can see the result of running loadRequest button:
總結(summary)
通過上面的效果圖和我的程式碼，我可以基本瞭解到WebView的讀取本地和通訊讀取網頁的基本用法。
I can fundamentally know the fundamental way to use WebView just like loading local HTML file and requesting website through above-mentioned effect pictures and my codes.