一、簡介
? ? ? ?近兩年隨著HTML5的迅速發展與日趨成熟，越來越多的移動開發者選擇使用HTML5來進行混合開發，不僅節約成本而且效果絢麗，那么作為內置瀏覽器的WebView被重視起來，不管是iOS還是Android，都要是使用WebView來加載HTML5頁面，甚至有些程序打開后只有一個WebView控件，其他的頁面都是被它加載出來網頁。作為iOS開發者，在這里詳細介紹一下UIWebView控件的使用。
二、概念
? ? ? 什么是UIWebView呢？
? ? ? UIWebView是UIKit下內置的瀏覽器控件，可以用它來瀏覽網頁、打開文檔等很多功能；UIWebView是一個混合體，繼承自UIView，遵循UIScrollViewDelegate協議，擁有delegate和scrollView屬性和一系列代理方法；系統自帶的Safari就是UIWebView實現的。
三、作用
看概念UIWebView貌似很牛X，它都能實現什么樣的功能呢？
1.加載html/htm網頁，提供網頁與系統的交互橋梁
2.加載pdf文件、docx文件、ppt文件、txt文件等
3.加載mp4文件
4.加載一些其他顯示類的文件
四、基本用法
#pragma mark –文件展示方法與步驟-
// 1.創建webView，并添加到self.view
UIWebView *webView = [[UIWebView alloc]init];
CGRectframe = self.view.bounds;
webView.frame= frame;
[self.view addSubview:webView];
// 2.確定文件路徑
NSURL *fileUrl = [[NSBundle mainBundle]URLForResource:@"詳談WebView" withExtension:@"html"];
NSURLRequest *request = [NSURLRequestrequest WithURL:fileUrl];
[webView loadRequest:request];
//也支持直接加載html
// NSString *htmlStr = @"也支持直接加載html";
// [webView loadHTMLString:htmlStrbaseURL:nil];
//如果展示pdf文件、docx文件、ppt文件、txt文件、mp4文件等，只需要將fileUrl替換成對應的文件，如：
fileUrl = [[NSBundle mainBundle]URLForResource:@"詳談WebView" withExtension:@"pdf"];
展示結果如圖
? ? ? ?這些是本地文件，如果是遠程服務器文件，只需要將本地url替換成遠程url（http://www.baidu.com）；展示文件非常簡單，這里不再啰嗦，我們來看看UIWebView提供的一些基本函數方法：
#pragma mark–UIWebView基本方法-
/**
* ? 刷新WebView頁面
*/
- (void)reload{
? ? [self.webView reload];
}
/**
* ? ?停止加載WebView頁面
*/
- (void)stopLoading{
? ? [self.webView stopLoading];
}
/**
* ? ?后退到上一個WebView頁面
*/
- (void)goBack{
? ? // webView提供判斷可后退的方法?
? ? if([self.webView canGoBack]) {
? ? ? ? [self.webView goBack];
? ? }
}
/**
* ? ?再返回到后退前的WebView頁面
*/
- (void)goForward{
? ? // webView提供判斷可前進的方法
? ? if([self.webView canGoForward]) {
? ? ? ? [self.webView goForward];
? ? }
}
五、代理方法
#pragma?mark -UIWebView代理方法-
//實現代理方法需要先設置代理（監聽網頁的加載過程）
webView.delegate=self;
/**
*每當webView即將發送一個請求前，先調用這個方法
作用：一般用來攔截webView發出的所有的請求（加載新的網頁）
@paramrequest即將要發出的請求
*
*發之前先問問代理讓不讓發送
*@returnYES：允許發送這個請求；
NO：禁止加載這個請求。
*/
- (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request
navigationType:(UIWebViewNavigationType)navigationType{
? ? NSLog(@"%s",__func__);
? ? //攔截百度網頁：
? ? // 1.獲取要加載網頁的url
? ? NSString*path = request.URL.absoluteString;
? ? // 2.尋找path中@"baidu"這個字符串
? ? NSUInteger loc = [path rangeOfString:@"baidu"].location;
? ? // 3.如果能找到baidu，則禁止訪問
? ? if(loc != NSNotFound) {
? ? ? ? return NO;
? ? }
? ? return YES;
}
/**
*網頁開始發送請求
*/
- (void)webViewDidStartLoad:(UIWebView*)webView{
? ? NSLog(@"%s",__func__);
}
/**
*網頁加載完畢
可以在這個方法里面獲取網頁信息，并與網頁進行交互，第六條為OC與JS之間的交互方法
*/
- (void)webViewDidFinishLoad:(UIWebView*)webView{
? ? NSLog(@"%s",__func__);
}
/**
*網頁加載失敗
*/
- (void)webView:(UIWebView*)webView
didFailLoadWithError:(nullableNSError*)error{
? ? NSLog(@"%s",__func__);
}
六、實現OC與JS之間的交互：
? ? ?網頁不僅是展示頁面，也是一個交互頁面，那么當用戶想從網頁調用系統方法，或者系統想更改網頁內容，怎么辦呢，這就涉及到了OC與JS之間的交互，交互本身是不難的，要求掌握一些基本的html語法和JS語法，JS與OC之間的通信以iOS7為界有兩種方式，首先看一下iOS7以前的通信方式。
方式一:
主要運用兩個方法：(PhoneGap框架也是基于此原理)
1、UIWebView的stringByEvaluatingJavaScriptFromString方法
2、UIWebViewDelegate的-(BOOL)webView:(UIWebView
*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType方法
1.OC調用JS
? ? ? 所謂OC調用JS一般是指存在于服務器的網頁，被加載到手機上時，系統可以對網頁進行增刪改查，但是我們是不能直接修改網頁內容的，只能通過JS動態來修改，如下示例：
//網頁加載完成后，才能對網頁進行操作，利用webView執行js代碼，操作網頁中的節點
-(void)webViewDidFinishLoad:(UIWebView*)webView {
? ? // 1.讀取當前頁面的URL
? ? NSString *url = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
? ? // document.location.href是獲取網頁url的js語法，意思是，webView執行一下這句js代碼，就會返回我們當前的網頁地址。
? ? // 2.讀取當前頁面的標題，同理上面
? ? NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
? ? // 3.js1是JS獲取標簽元素a的方法，js2是將a刪除，實現了動態刪除標簽a的功能，實現了交互
? ? NSStringv *js1 =@"var a =
document.getElementsByTagName('a')[1];";
? ? NSString *js2 =@"a.parentNode.removeChild(a)";
? ? // 4.JS語法獲取網頁的body源碼
? ? NSString*js3 =@"document.body.innerHTML";
? ? //執行JS代碼
? ? [webView stringByEvaluatingJavaScriptFromString:js1]; ??
? ? [webView stringByEvaluatingJavaScriptFromString:js2];
? ? [webView stringByEvaluatingJavaScriptFromString:js3];
? ? //總結：webView提供了stringByEvaluatingJavaScriptFromString這個方法執行js代碼，我們只需要寫好js代碼直接調用就會被webView執行，實現OC調用JS，增刪改查，只需要替換js語法就行了。
}
JS刪除百度a元素的前后截屏對比：
2.JS調用OC
? ? ? 所謂JS調用OC一般是指，頁面中某些功能需要調用系統的方法，html和js無法直接和系統交互，只能通知webView，然后webView獲取到消息，傳遞到OC實現JS調用OC，比如打電話或者拍照功能，如下實例：首先寫一個簡單的網頁，只有打電話和拍照兩個按鈕：
// JS實現點擊頁面上的打電話按鈕調用下面這個方法
functionfn_call(){
? ? //alert('fn_call');
? ? //調用OC中的call方法
? ? //window代表拿到瀏覽器窗口，規定一個協議發送一個鏈接，就會響應到webView的這個shouldStartLoadWithRequest代理方法，如下，協議要避開http，類似app間的跳轉協議
? ? window.location.href ='toOC://call:?18612345678';
}
// JS實現點擊頁面上的拍照按鈕調用下面這個方法
functionfn_open_canmera(){
? ? //alert('fn_open_canmera');
? ? //調用OC中的openCanmera方法?
? ? window.location.href ='toOC://openCanmera';
}
---------------------------------------------
// 在JS中調用OC
// webView每當發送一個請求之前，都會先調用這個方法（能攔截所有的請求）
-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{
? ? //NSLog(@"shouldStartLoadWithRequest:%@",request.URL.absoluteString);
? ? NSString*url = request.URL.absoluteString;
? ? //[url hasPrefix:@"tooc://"];
? ? NSRange range = [urlrangeOfString:@"tooc://"];
? ? NSUInteger loc = range.location;
? ? if(loc != NSNotFound) {
? ? ? ? //方法名
? ? ? ? NSString *method = [url substringFromIndex:loc + range.length];
? ? ? ? //NSLog(@"method:%@",method);
? ? ? ? NSInteger locParam = [method rangeOfString:@"?"].location;
? ? ? ? id obj =nil;
? ? ? ? if(locParam != NSNotFound) {
? ? ? ? ? ? obj = [method substringFromIndex:locParam +1];
? ? ? ? ? ? method = [method substringToIndex:locParam];
? ? ? ? ? ? method = [method stringByAppendingString:@":"];
? ? ? ? }
? ? ? ? //將方法名轉成SEL
? ? ? ? SEL sel =NSSelectorFromString(method);
? ? ? ? if([self respondsToSelector:sel]) {
? ? ? ? ? ? [self performSelector:sel withObject:obj];
? ? ? ? }
? ? }
? ? returnYES;
}
/**
*打電話
*/
-(void)call:(NSString*)phone{
? ? NSLog(@"call......:%@",phone);
}
/**
*打開照相機
*/
-(void)openCanmera{
? ? NSLog(@"openCanmera......");
}
//總結：
// OC -> JS
-(void)webViewDidFinishLoad:(UIWebView*)webView {
? ? [webViewstringByEvaluatingJavaScriptFromString:@“這里是JS語法”];
}
// JS -> OC
//先在網頁中設定好響應方法和協議，然后讓網頁響應這個協議并賦值給window.location.href，這樣攔截所有請求的shouldStartLoadWithRequest代理方法就會接收到這個規定好的協議，按照這個協議轉化成SEL方法，然后去執行就好了，就實現了JS調用OC。
方式二：
? ? ? ?iOS7以前，在App中調用JavaScript的方式只有一種，從iOS7開始，我們可以使用JavaScriptCore框架來讓我們的Objective-C代碼和JavaScript進行深度交互。
先加入JavaScriptCore的頭文件。
#import <JavaScriptCore/JavaScriptCore.h>
/**
OC-->JS:
evaluateScript:方法
JS-->OC:
context[@""] = ^(){};
都在webViewDidFinishLoad方法里執行
*/
- (void)webViewDidFinishLoad:(UIWebView*)webView{
? ? //搭建環境，首先導入JavaScriptCore庫,然后在OC中獲取JS的上下文，即該UIWebview的JS執行環境
? ? JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
? ? //注冊一個異常拋出，出錯好查
? ? [context setExceptionHandler:^(JSContext*ctx,JSValue*value) {
? ? ? ? NSLog(@"error:
%@", value);
}];
// 1.OC-->JS
// JS語法
NSString*js1 =@"document.title";
//執行JS語法，并接收返回
JSValue*backValue1 = [context evaluateScript:js1];
NSLog(@"標題：%@",backValue1);
NSString*js2 =@"var a = document.getElementsByTagName(\'a\')[1];\na.parentNode.removeChild(a);";
JSValue*backValue2 = [context evaluateScript:js2];
NSLog(@"刪除百度按鈕：%@",backValue2);
NSString*js3 =@"document.body.innerHTML";
JSValue*backValue3 = [contexte valuateScript:js3];
NSLog(@"HTML：%@",backValue3);
// 2.JS-->OC
//將一個block注冊給JS上下文，它會被轉換成一個JS中的函數
//在JS中定義一個方法名，與html相對應，實現是block
context[@"fn_call"] = ^(NSString* phoneNum){
? ? [self call:phoneNum];
};
context[@"fn_open_canmera"] = ^(){
? ? [self openCanmera];
};
// 3.真正的交互
//從OC中添加一圖片到JS，并能響應事件回到OC，JavaScriptCore提供了JSExport作為兩種語言的互通協議，需要遵循<JSExport>協議，并留出接口，那么首先要在.h文件中做如下設置
#import <JavaScriptCore/JavaScriptCore.h>
@protocol MyProtocol<JSExport>
//觸發圖片響應的方法
-(void)sayHate;
@end
@interfaceViewController :UIViewController<MyProtocol>
@end
然后再在.m文件中做如下操作
{
……
//在js中注冊一個自己
context[@"myObj"] =self;
NSString*code =@"var img =
document.createElement('img');img.src = 'namei.jpg';document.body.appendChild(img);img.onclick=function(){myObj.sayHate()};";
[context evaluateScript:code];
}
//JS反過來調OC的方法
-(void)sayHate{
? ? NSLog(@"討厭了啦");
}
/**
*打電話
*/
-(void)call:(NSString*)phone{
? ? NSLog(@"call......:%@",phone);
}
/**
*打開照相機
*/
-(void)openCanmera{
? ? NSLog(@"openCanmera......");
}
//總結：
// 1.導入JavaScriptCore的頭文件
#import<JavaScriptCore/JavaScriptCore.h>
// 2.搭建環境
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// OC -> JS
[context evaluateScript:@"JS語法"]
// JS -> OC
// 注冊與JS中要調用的同名方法，block里面寫方法的實現
context[@"JS中的方法名"] = ^(){ 方法的實現 };
// OC <-> JS
遵循<JSExport>協議，可以實現互通（在OC中定義JS方法，并回調回OC）
七、總結
? ? ? ?想要更好的了解網頁與系統的交互，需要了解些js和html的基礎知識，以上兩種iOS7前后的交互方式都好用。webView為移動開發提供了很多便捷，其他具體情況要在開發中慢慢摸索，UIWebView先談到這里。
