UIWebView 瀏覽器控件

WebView的優(yōu)缺點：
優(yōu)點：（1）跨平臺（2）發(fā)布更新快（3）排版布局能力強
缺點：（1）性能差（2）數(shù)據(jù)通訊復(fù)雜（3）耗費流量
使用場景：（1）排版復(fù)雜的內(nèi)容（2）需后臺靈活控制的界面

一父能、初始化與三種加載方式

UIWebView繼承于UIView贴捡，因此多艇，其初始化方法和一般的view一樣口猜，通過alloc和init進(jìn)行初始化，其加載數(shù)據(jù)的方式有三種：
1.第一種：

- (void)loadRequest:(NSURLRequest *)request;

這是加載網(wǎng)頁最常用的一種方式，通過一個網(wǎng)頁URL來進(jìn)行加載，這個URL可以是遠(yuǎn)程的也可以是本地的，例如加載百度的主頁

UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.frame];
[view loadRequest:[NSURLRequestrequestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
[self.view addSubview:view];

2.第二種：

- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

這個方法需要將html文件讀取為字符串确垫，其中baseURL是我們自己設(shè)置的一個路徑，用于尋找html文件中引用的圖片等素材帽芽。

3.第三種：

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

這個方式使用的比較少删掀，但也更加自由，其中data是文件數(shù)據(jù)嚣镜，MIMEType是文件類型爬迟，textEncodingName是編碼類型，baseURL是素材資源路徑菊匿。

二付呕、常用屬性和方法

屬性：

1.設(shè)置webView的代理

@property (nonatomic, assign) id <UIWebViewDelegate> delegate;

2.內(nèi)置的scrollView

@property (nonatomic, readonly, retain) UIScrollView *scrollView;

3.獲取URL請求

@property (nonatomic, readonly, retain) NSURLRequest *request;

4.獲取能否返回上一級

@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack;

5.獲取能否跳轉(zhuǎn)下一級

@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward;

6.獲取是否正在加載數(shù)據(jù)

@property (nonatomic, readonly, getter=isLoading) BOOL loading;

7.設(shè)置是否縮放到適合屏幕大小
UIWebView可以縮放HTML頁面來適配其視口大小计福，從而達(dá)到整屏顯示內(nèi)容的效果，并且用戶可以用捏合動作來放大或縮小頁面來查看內(nèi)容徽职。

默認(rèn)情況下UIWebView加載HTML頁面后象颖，會以頁面的原始大小進(jìn)行顯示，亦即如果頁面的大小超出UIWebView視口大小姆钉，UIWebView會出現(xiàn)滾動效果说订，而且用戶只能通過滾動頁面來查看不同區(qū)域的內(nèi)容，不能使用手指的捏合手勢來放大或縮小頁面潮瓶。

@property (nonatomic) BOOL scalesPageToFit;

例如：webView.scalesPageToFit = YES;

8.設(shè)置某些數(shù)據(jù)變?yōu)殒溄有问教绽洌@個枚舉可以設(shè)置如電話號，地址毯辅，郵箱等轉(zhuǎn)化為鏈接

@property (nonatomic) UIDataDetectorTypes dataDetectorTypes;

9.設(shè)置是否使用內(nèi)聯(lián)播放器播放視頻

@property (nonatomic) BOOL allowsInlineMediaPlayback;

10.設(shè)置視頻是否自動播放

@property (nonatomic) BOOL mediaPlaybackRequiresUserAction;

11.設(shè)置音頻播放是否支持ari play功能

@property (nonatomic) BOOL mediaPlaybackAllowsAirPlay;

12.設(shè)置是否將數(shù)據(jù)加載如內(nèi)存后渲染界面

@property (nonatomic) BOOL suppressesIncrementalRendering;

13.設(shè)置用戶交互模式

@property (nonatomic) BOOL keyboardDisplayRequiresUserAction;
下面這些屬性是iOS7之后才有的埂伦，通過他們可以設(shè)置更加有趣的web體驗

14.這個屬性用來設(shè)置一種模式，當(dāng)網(wǎng)頁的大小超出view時思恐，將網(wǎng)頁以翻頁的效果展示

@property (nonatomic) UIWebPaginationMode paginationMode;

UIWebPaginationMode 枚舉：
UIWebPaginationModeUnpaginated //不使用翻頁效果
UIWebPaginationModeLeftToRight //將網(wǎng)頁超出部分分頁沾谜，從左向右進(jìn)行翻頁
UIWebPaginationModeTopToBottom //將網(wǎng)頁超出部分分頁，從上向下進(jìn)行翻頁
UIWebPaginationModeBottomToTop //將網(wǎng)頁超出部分分頁胀莹，從下向上進(jìn)行翻頁
UIWebPaginationModeRightToLeft //將網(wǎng)頁超出部分分頁基跑，從右向左進(jìn)行翻頁

15.設(shè)置每一頁的長度

@property (nonatomic) CGFloat pageLength;

16.設(shè)置每一頁的間距

@property (nonatomic) CGFloat gapBetweenPages;

17.獲取分頁數(shù)

@property (nonatomic, readonly) NSUInteger pageCount;

18.禁用頁面滾動彈跳

webView.scrollView.bounces = NO;

方法：

1.重新加載數(shù)據(jù)

- (void)reload;

2.停止加載數(shù)據(jù)

- (void)stopLoading;

3.返回上一級

- (void)goBack;

4.跳轉(zhuǎn)下一級

- (void)goForward;

5.通過javaScript操作web數(shù)據(jù)，一般在webViewDidFinishLoad代理方法中描焰，在OC中執(zhí)行JS代碼的橋梁

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString*)script;

返回值：執(zhí)行完JS獲取返回的東西媳否，舉例如下：
（1）JS在執(zhí)行完一段代碼之后會將最后一個變量值返回給我們,代碼如下 :

NSString *js = @"var dog = {name : 'teddy', age : 20};dog.name; dog.age;";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:js];
NSLog(@"%@",result);  // 結(jié)果 : 20 字符串類型

（2）當(dāng)我們調(diào)完JS某個函數(shù)的時候,我們可以拿到這個函數(shù)的返回值,代碼如下 :

NSString *js = @"function login (username, pwd) { return 10;} login();";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:js];
NSLog(@"%@",result);  // 結(jié)果 : 10 函數(shù)的返回值

（3）如何獲取網(wǎng)頁的所有源代碼, 實現(xiàn)代碼如下 :

NSString *js = @"document.getElementsByTagName('html')[0].outerHTML";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:js];
NSLog(@"%@",result);  // 輸出結(jié)果為網(wǎng)頁所有的源代碼

補充 : document.body.innerHTML 意思是獲取body內(nèi)容的所有源代碼

JS代碼在OC中的排版

第一種做法：

NSMutableString *js = [NSMutableString string];
[js appendString:@"function login (username, pwd) {"];
[js appendString:@"     return 10;"];
[js appendString:@"         ]"];
[js appendString:@"     login();"];

第二種做法：

NSString *js = @"function login (username, pwd) {  "
"   return 10;"
"       }"
"   login();";

三、代理方法 UIWebViewDelegate

1.每當(dāng)webView發(fā)送一個請求之前都會先調(diào)用這個方法栈顷，監(jiān)聽準(zhǔn)備加載內(nèi)容時調(diào)用逆日，通過判斷請求等參數(shù)來返回不同返回值判斷是否加載該網(wǎng)頁，是JS中執(zhí)行OC代碼的橋梁

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

參數(shù)：
（1）request:即將發(fā)送的請求
（2）UIWebViewNavigationType 枚舉：
UIWebViewNavigationTypeLinkClicked 用戶觸擊了一個鏈接
UIWebViewNavigationTypeFormSubmitted 用戶提交了一個表單
UIWebViewNavigationTypeBackForward 用戶觸擊前進(jìn)或返回按鈕
UIWebViewNavigationTypeReload 用戶觸擊重新加載的按鈕
UIWebViewNavigationTypeFormResubmitted 用戶重復(fù)提交表單
UIWebViewNavigationTypeOther 發(fā)生其它行為
返回值：Yes允許發(fā)送這個請求萄凤，No禁止發(fā)送這個請求

例子：查看該案例發(fā)送和代理攔截請求（稍后整理，比較重要）
拼接HTML網(wǎng)頁方法顯示在WebView上

2.開始加載時調(diào)用的方法

- (void)webViewDidStartLoad:(UIWebView *)webView;

3.網(wǎng)頁加載完畢執(zhí)行的方法搪哪，一般在里面執(zhí)行JS代碼（刪除一些節(jié)點）靡努，相當(dāng)于網(wǎng)頁JS的window.onload屬性

- (void)webViewDidFinishLoad:(UIWebView *)webView;

例子：

- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *js = @"document.getElementsByTagName('footer')[0].remove();";
[webView stringByEvaluatingJavaScriptFromString:js];}

補充：用JS刪除，瀏覽器的console中調(diào)試

（1）按標(biāo)簽名刪除

（2）按類刪除

4.加載失敗時調(diào)用的方法

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

四晓折、其它案例：

  1. 在Safari中打開鏈接地址
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
        [[UIApplication sharedApplication] openURL:[request URL]];
        return NO;
    }
    return YES;
}

2.讓UIWebView更加接近native（原生）

某些情況下惑朦，我們既想要UIWebView加載web頁面，又想使得所加載的頁面的外觀和操作行為更加接近native感覺漓概。這時需要使用一些CSS樣式來達(dá)到這些效果漾月，這些CSS只適用于IOS中的Safari。

  • - -webkit-touch-callout
    禁用長按觸控對象彈出的菜單胃珍。IOS中梁肿，當(dāng)你長按一個觸控對象時蜓陌，如鏈接，safari會彈出包含鏈接信息的菜單吩蔑。禁用此行為CSS代碼
.disable-callout{
    -webkit-touch-callout:none ;
}

或在webViewDidFinisheLoad中使用

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
  • - -webkit-user-select
    控制用戶是否可以選擇頁面元素內(nèi)容钮热。IOS中，在頁面元素中進(jìn)行長按操作烛芬，safari會彈出菜單隧期，來允許進(jìn)行選擇行為。禁用此行為代碼
.disable-select{
    -webkit-user-select:none;
}

或在webViewDidFinisheLoad中使用

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
  • - -webkit-tap-highlight-color
    覆蓋當(dāng)用戶tap鏈接或clickable元素時默認(rèn)產(chǎn)生的高亮顏色（灰色）赘娄。如
.no-highlight{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末仆潮，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子遣臼，更是在濱河造成了極大的恐慌鸵闪，老刑警劉巖，帶你破解...
    沈念sama閱讀 222,681評論 6贊 517
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件暑诸，死亡現(xiàn)場離奇詭異蚌讼，居然都是意外死亡，警方通過查閱死者的電腦和手機个榕，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門篡石，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人西采，你說我怎么就攤上這事凰萨。” “怎么了械馆？”我有些...
    開封第一講書人閱讀 169,421評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵胖眷，是天一觀的道長。 經(jīng)常有香客問我霹崎，道長珊搀，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 60,114評論 1贊 300
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任尾菇，我火速辦了婚禮境析，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘派诬。我一直安慰自己劳淆，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 69,116評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布默赂。 她就那樣靜靜地躺著沛鸵，像睡著了一般。 火紅的嫁衣襯著肌膚如雪缆八。 梳的紋絲不亂的頭發(fā)上曲掰，一...
    開封第一講書人閱讀 52,713評論 1贊 312
  • 城市分裂傳說
    那天疾捍，我揣著相機與錄音，去河邊找鬼蜈缤。 笑死拾氓，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的底哥。 我是一名探鬼主播咙鞍，決...
    沈念sama閱讀 41,170評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼趾徽！你這毒婦竟也來了续滋？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 40,116評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤孵奶，失蹤者是張志新（化名）和其女友劉穎疲酌，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體了袁，經(jīng)...
    沈念sama閱讀 46,651評論 1贊 320
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡朗恳，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了载绿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粥诫。...
    茶點故事閱讀 40,865評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖崭庸，靈堂內(nèi)的尸體忽然破棺而出怀浆，到底是詐尸還是另有隱情，我是刑警寧澤怕享，帶...
    沈念sama閱讀 36,527評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布执赡，位于F島的核電站，受9級特大地震影響函筋，放射性物質(zhì)發(fā)生泄漏沙合。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3贊 336
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一驻呐、第九天 我趴在偏房一處隱蔽的房頂上張望灌诅。 院中可真熱鬧，春花似錦含末、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0贊 25
  • 一樁弒父案佣盒，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至顽聂，卻和暖如春肥惭，著一層夾襖步出監(jiān)牢的瞬間盯仪，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工蜜葱， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留全景，地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3贊 379
  • 代替公主和親
    正文 我出身青樓牵囤，卻偏偏與公主長得像爸黄，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子揭鳞，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2贊 361

推薦閱讀更多精彩內(nèi)容

  • http://www.cnblogs.com/mddblog/p/5281748.html 一炕贵、整體介紹 UIWe...
    F麥子閱讀 1,236評論 0贊 2
  • 一乓梨、簡介 近兩年隨著HTML5的迅速發(fā)展與日趨成熟鳖轰，越來越多的移動開發(fā)者選擇使用HTML5來進(jìn)行混合開發(fā)，不僅節(jié)約...
    RainyGY閱讀 1,874評論 1贊 12
  • 前言 關(guān)于UIWebView的介紹扶镀，相信看過上文的小伙伴們蕴侣，已經(jīng)大概清楚了吧，如果有問題狈惫，歡迎提問睛蛛。 本文是本系列...
    CoderLF閱讀 8,974評論 2贊 12
  • 一、簡介 近兩年隨著HTML5的迅速發(fā)展與日趨成熟胧谈，越來越多的移動開發(fā)者選擇使用HTML5來進(jìn)行混合開發(fā)忆肾，不...
    寶寶teacher閱讀 2,313評論 3贊 15
  • IOS之UIWebView的使用 剛接觸IOS開發(fā)1年多，現(xiàn)在對于 混合式 移動端開發(fā)越來越流行菱肖，因為開發(fā)成本上客冈、...
    學(xué)無止境666閱讀 45,795評論 5贊 53