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.
//关联相关控件和方法
//Contact ViewCotroller with some methods or elements.
@property (weak, nonatomic) IBOutlet UIWebView *webView;
- (IBAction)testLoadHTMLString:(id)sender;
//读取本地HTML文件的方法
//Load local HTML file.
- (IBAction)testLoadData:(id)sender;
//读取本地网页文件数据的方法
//Load local data of Web files.
- (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.At the same time ,We need to print the HTML code belongs to the page you visit in the console.
@end

有了相关的头文件的定义的工作之后，我们需要来实现我们所定义的函数，具体的内容我们就可以在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.