轉(zhuǎn)自http://ju.outofmemory.cn/entry/18807

有時候我們在內(nèi)嵌的webview中希望點(diǎn)擊一個鏈接之后，觸發(fā)iOS原生事件，而不是webview內(nèi)頁面跳轉(zhuǎn)(因?yàn)閣ebview的跳轉(zhuǎn)很生硬，而ajax+js模擬則不如原生segue平滑)。

有時候我們希望在頁面內(nèi)consloe.log(‘log something‘)的時候在控制臺里看到輸出，但手機(jī)里沒有控制臺，所以我們希望可以利用xcode的控制臺輸出信息。

因?yàn)閕OS沒有提供API讓我們直接用html或者js來跟外部交互，所以我們必須用另外一種巧妙的辦法來實(shí)現(xiàn)這兩個功能。這種方法可以滿足我們兩種需求。

console.log

在html頁面中重新定義console.log:

然后在需要捕獲的viewController.m中實(shí)現(xiàn)協(xié)議：

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSString*requestString =[[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];//NSLog(requestString);if([requestString hasPrefix:@"ios-log:"]){NSString*logString =[[requestString componentsSeparatedByString:@":#iOS#"]objectAtIndex:1];NSLog(@"UIWebView console: %@",logString);returnNO;}returnYES;}

當(dāng)然前提是webView需要把委托設(shè)定為當(dāng)前控制器：

self.webView =[[UIWebViewalloc]initWithFrame:CGRectMake(0.0f,0.0f,self.view.bounds.size.width,self.view.bounds.size.height-44)];self.webView.delegate=self;

原理很簡單，我們重新定義了console.log函數(shù)，還有console.debug，console.info，console.warn，console.error。當(dāng)我們在頁面js中調(diào)用console.log的時候，就會創(chuàng)建一個iframe發(fā)出請求，請求的協(xié)議為ios-log:，路徑就是我們的log字符串。發(fā)出請求之后，迅速把這個iframe清理掉。

這樣，在webview中我們發(fā)出了一個請求，然后就沒了。外部我們用objective-c實(shí)現(xiàn)了一個協(xié)議，就是webview開始發(fā)出請求之前就會調(diào)用的函數(shù)。在這個函數(shù)中我們過濾所有的請求(因?yàn)槌薸os-log，還有一些“正常”的請求比如http和mailto)，當(dāng)前綴為ios-log的時候，我們就NSLog即可。

if最后的returnNO的意思是該webview的請求被捕獲，不再請求(這個實(shí)際上不存在的頁面)。我們希望一些合法請求(比如http、mailto等)不被捕獲，所以最后if外面丟了一個returnYES。

利用鏈接觸發(fā)場景變換

iOS原生的場景變換叫做segue，xcode為我們內(nèi)置了幾種原生動畫，比如導(dǎo)航條總是固定在上面的push，這樣頁面前后推動的時候，導(dǎo)航條保持不變(當(dāng)然里面的內(nèi)容可以變)，內(nèi)容的切換也很流暢。segue還可以在interface builder中設(shè)置動畫效果，包括全屏翻轉(zhuǎn)或者漸進(jìn)等。

有一些第三方j(luò)s庫可以讓我們在webview中模擬這種場景變換，也就是說用css設(shè)計一個導(dǎo)航條放在webview中置頂，然后用js或者css3來模擬push或者flip3d的效果。比如iScroll是模擬頂部和底部固定的，jQtouch(這個要FQ搜索)是模擬push和flip3d效果的。

我強(qiáng)烈反對在原生應(yīng)用中使用js庫來實(shí)現(xiàn)場景變換動畫，因?yàn)榉浅２涣鲿场⒉桓种浮赢嬓Ч煌?#xff0c;還有最后一個原因，我們是可以在webview中觸發(fā)外部場景變換的，原生的！用html5制作流暢的原生app的關(guān)鍵就是能夠方便地調(diào)用原生接口的功能或者效果我們都用原生的，而不去用笨拙的方法實(shí)現(xiàn)。

webview中的代碼：

一個按鈕

非常簡單，myapp這個協(xié)議你可以自己隨便命名，稍后我們會在objective-c中捕獲它。

還是要實(shí)現(xiàn)該webview的委托controller的協(xié)議方法，如果你已經(jīng)定義這個方法了(就像上面那個例子)，你只需要在方法體里加入方法體里面的內(nèi)容，否則會提醒你重復(fù)定義。

-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSURL *url =[request URL];if([[url scheme]isEqualToString:@"myapp"]){NSString*slug =[url path];[selfperformSegueWithIdentifier:@"heroSegue"sender:slug];returnNO;}returnYES;}

另外我在interface builder中已經(jīng)拖拽了一個新的控制器，在新的控制器跟導(dǎo)航控制器之間，我直接拖了一個segue，命名id為heroSegue，所以這里可以用performSegueWithIdentifier來調(diào)用segue。

現(xiàn)在，還是在本controller中，我們實(shí)現(xiàn)另一個委托方法：

/*

* 頁面轉(zhuǎn)換時觸發(fā)

*/-(void)prepareForSegue:(UIStoryboardSegue*)segue sender:(id)sender {if([segue.identifier isEqualToString:@"heroSegue"]){NSLog(@"%@",sender);[self.webView stopLoading];YUGHeroDetailViewController*destViewController =segue.destinationViewController;destViewController.heroSlug =(NSString*)sender;}}

也就是說，發(fā)生segue變化之前，就會執(zhí)行這一方法，首先判斷identifier是不是等于heroSegue，如果是，自己的webview不再載入，目標(biāo)控制器(也就是即將切換過去的子頁面的控制器)中設(shè)置公有屬性heroSlug的值。

然后，我們在目標(biāo)頁面的controller的H中定義：

@property(strong)NSString*heroSlug;

最后，在目標(biāo)頁面中，我們定義的congroller中的M能拿到heroSlug這個參數(shù)。

NSLog(@"%@",self.heroSlug);

這樣就可以了，拿到slug之后，我們實(shí)際上就可以調(diào)用一個本地頁面，帶上slug參數(shù)，然后通過ajax的方式讀取遠(yuǎn)程頁面或者json數(shù)據(jù)，這個就不屬于本文內(nèi)容了。

如果你是新手，在做上面的這些操作的時候可能會漏掉一兩個步驟，編輯器會報錯，這時候仔細(xì)閱讀并校對你的代碼。如果實(shí)在不行，說明清楚操作和報錯信息，再給我留言。

練習(xí)題：原生title的好處是它在字符數(shù)較短時是居中的，而字符更長一點(diǎn)時會偏右顯示，更長一些時顯示省略號。那么webview載入一個ajax數(shù)據(jù)的頁面的時候，如何在頁面載入成功時，設(shè)置原生title？

提示，還是自定義協(xié)議。

原文：http://www.cnblogs.com/xing-li/p/4537834.html

總結(jié)

以上是生活随笔為你收集整理的如何用html构建ios应用,使用HTML5构建iOS原生APP的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。