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