1. 程式人生 > >IOS學習之WebView載入本地HTML程式碼或網路資源

IOS學習之WebView載入本地HTML程式碼或網路資源

新建SingleViewApplication應用,命名WebViewSample, 在storyboard中拖3個Button,定義動作,再拖一個WebView,然後建立他們的弱連結輸出口,得到如下的程式碼:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIWebViewDelegate>

@property (weak, nonatomic) IBOutlet UIWebView *webViewe;

- (IBAction)testLoadHTMLString:(id)sender;
- (IBAction)testLoadData:(id)sender;
- (IBAction)testLoadRequest:(id)sender;

@end
佈局如下圖:


在ViewVontroller.m中編輯動作事件:

方法1:採用

<span style="color: rgb(54, 46, 43);">loadHTMLString方法載入本地HTML(</span><span style="color:#ff0000;">注:註釋掉的方法也可以使用</span><span style="color:#362e2b;">)</span><pre name="code" class="html" style="color: rgb(54, 46, 43);">是<span style="color:#ff6666;">同步載入方式</span>
- (IBAction)testLoadHTMLString:(id)sender {
    
//    NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"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.webViewe loadHTMLString:html baseURL:bundleUrl];
//    }

    NSBundle *bundle = [NSBundle mainBundle];
    NSString *resPath = [bundle resourcePath];
    NSString *filePath = [resPath stringByAppendingPathComponent:@"index.html"];
    [self.webViewe loadHTMLString:[NSString stringWithContentsOfFile:filePath] baseURL:[NSURL fileURLWithPath:[bundle bundlePath]]];
}
方法2:採用
loadData的方法載入本地檔案的資料;是<span style="color:#ff6666;">同步載入方式</span>
- (IBAction)testLoadData:(id)sender {
    
    
    NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSURL *bundleUrl = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
    NSError *error = nil;
    
    NSData *htmlData = [[NSData alloc]  initWithContentsOfFile: htmlPath];
    
    if (error == nil) {//資料載入沒有錯誤情況下
        [self.webViewe loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8"baseURL: bundleUrl];
    }
}
方法3:採用
loadRequest的方法,是<span style="color:#ff0000;background-color: rgb(255, 255, 255);">非同步載入方式</span>
- (IBAction)testLoadRequest:(id)sender {
    
    NSURL *url = [NSURL URLWithString:@"http://www.51work6.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webViewe loadRequest:request];
    self.webViewe.delegate = self;
}

#pragma mark -- UIWebDelegate
-(void) webViewDidFinishLoad:(UIWebView *)webView{
    NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]);
}

注:在載入本地HTML檔案程式碼時,需要在本地資料夾中有index.html檔案存在。步驟:

1、新建一個html檔案,將下面程式碼拷貝進去:

<HEAD>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</HEAD>
<BODY>
<H1>	
	WebView: 幫助</H1>
<UL>
<LI><a href="#create">Create</a></LI>
<LI><a href="#edit">Edit</a></LI>
<LI><a href="#delete">Delete</a></LI>
<LI><a href="#mail">Mail</a></LI>
</UL>
<p>
<a name="create"></a>
<strong>Create:</strong><BR>
You can create new notes by selecting the + button in the upper right hand side of the main list of notes.  
This will create a new blank note for editing.
</p>
<p>
<a name="edit"></a>
<strong>Edit:</strong><BR>
You can edit notes by selecting a note from the list on the main list page.  This will bring your existing note
up in the editor.  You can edit the note and save your changes.
</p>
<p>
<a name="delete"></a>
<strong>Delete:</strong><BR>
You can delete notes by selecting the edit button in the upper left corner on the main list page.  This will enable
the standard list editing function to allow you to delete notes.
</p>
<p>
<a name="mail"></a>
<strong>Mail:</strong><BR>
You can mail notes by selecting the action button in the lower left corner on the notes view page.  This will bring
up an action list that lets you select Mail Note from which point you can address and send your note.
</p>
<p>
</BODY>
2、將此檔案載入到WebViewSample中,與ViewVontroller.m同一目錄:

   右鍵組名WebViewSample,選中Add Files To “WebViewSample”,下面選中Create Groups,點選Add,即可。

注:create Groups是的概念,此時引用路徑為“index.html”,圖示為黃色;

create Folder reference 是資料夾的概念,引用路徑是“xxx資料夾/index.html”,圖示為藍色

此時即可得到結果~