轉自http://ju.outofmemory.cn/entry/18807

有時候我們在內嵌的webview中希望點擊一個鏈接之后，觸發iOS原生事件，而不是webview內頁面跳轉(因為webview的跳轉很生硬，而ajax+js模擬則不如原生segue平滑)。

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

因為iOS沒有提供API讓我們直接用html或者js來跟外部交互，所以我們必須用另外一種巧妙的辦法來實現這兩個功能。這種方法可以滿足我們兩種需求。

console.log

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

然后在需要捕獲的viewController.m中實現協議：

-(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;}

當然前提是webView需要把委托設定為當前控制器：

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函數，還有console.debug，console.info，console.warn，console.error。當我們在頁面js中調用console.log的時候，就會創建一個iframe發出請求，請求的協議為ios-log:，路徑就是我們的log字符串。發出請求之后，迅速把這個iframe清理掉。

這樣，在webview中我們發出了一個請求，然后就沒了。外部我們用objective-c實現了一個協議，就是webview開始發出請求之前就會調用的函數。在這個函數中我們過濾所有的請求(因為除了ios-log，還有一些“正?！钡恼埱蟊热鏷ttp和mailto)，當前綴為ios-log的時候，我們就NSLog即可。

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

利用鏈接觸發場景變換

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

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

我強烈反對在原生應用中使用js庫來實現場景變換動畫，因為非常不流暢、不跟手指、動畫效果跟原生不同，還有最后一個原因，我們是可以在webview中觸發外部場景變換的，原生的！用html5制作流暢的原生app的關鍵就是能夠方便地調用原生接口的功能或者效果我們都用原生的，而不去用笨拙的方法實現。

webview中的代碼：

一個按鈕

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

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

-(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中已經拖拽了一個新的控制器，在新的控制器跟導航控制器之間，我直接拖了一個segue，命名id為heroSegue，所以這里可以用performSegueWithIdentifier來調用segue。

現在，還是在本controller中，我們實現另一個委托方法：

/*

* 頁面轉換時觸發

*/-(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;}}

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

然后，我們在目標頁面的controller的H中定義：

@property(strong)NSString*heroSlug;

最后，在目標頁面中，我們定義的congroller中的M能拿到heroSlug這個參數。

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

這樣就可以了，拿到slug之后，我們實際上就可以調用一個本地頁面，帶上slug參數，然后通過ajax的方式讀取遠程頁面或者json數據，這個就不屬于本文內容了。

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

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

提示，還是自定義協議。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。