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