【iOS開發】UIWebView與JavaScript(JS) 回調互動

標籤：webview   with   source   定向   實現   erb   mat   iphone   開源工程   

引用：http://blog.sina.com.cn/s/blog_693de6100102vi3w.html 很多關於object-c(簡稱:oc，是ios開發app使用的語言) 與 js 互動的文章都比較適用於 mac開發，iOS的webview 還是有所不一樣，參考：http://blog.sina.com.cn/s/blog_693de6100102vhuh.html本文提供了一個很好解決 互動的思路。自然，從oc到js，可以使用 stringByEvaluatingJavaScriptFromString： 來實現。從js到oc，採用比較巧妙的設計，UIWebView瀏覽器攔截 url請求，自訂url的方式攔截互動請。--------------------------------------------------------------------------------------------------UIWebView是IOS SDK中渲染網面的控制項，在顯示網頁的時候，我們可以hack網頁然後顯示想顯示的內容。其中就要用到javascript的知識，而UIWebView與javascript互動的方法就是stringByEvaluatingJavaScriptFromString:有了這個方法我們可以通過objc調用javascript,可以注入javascript。首先我們來看一下，如何調用javascript:[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];  這兒myFunction()就是我們的javascript方法。 再來看看入何注入javascript,我們先寫一個需要注入的javascript:function showAlert() {      alert(‘in show alert‘);  }  儲存為test.js,然後拖到xcode 的resource分組下。再用代碼在初始化的時候注入這個js（如在viewDidLoad方法裡）。NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];  NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath];  [webView stringByEvaluatingJavaScriptFromString:jsString];  這樣就注入了上面的js，那麼我們可以隨時調用js的方法，如何調用，上面有介紹。 那麼我們能不能通過js來調用objc的方法呢。 當然可以，原理就是利用UIWebView重新導向請求，傳一些命令到我們的UIWebView,在UIWebView的delegate的方法中接收這些命令，並根據命令執行相應的objc方法。這樣就相當於在javascript中調用objc的方法。說起來有點抽象，看看代碼一下就明白。首先我們寫一個javascript 方法如下：[javascript] function sendCommand(cmd,param){      var url="testapp:"+cmd+":"+param;      document.location = url;  }  function clickLink(){      sendCommand("alert","你好嗎？");  }  然後在你的html裡調用這個js方法 如： [javascript] "button" value="Click me!" onclick="clickLink()" />  最後我們在UIWebVew中截獲這個重新導向請求：#pragma mark --   #pragma mark UIWebViewDelegate    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {       NSString *requestString = [[request URL] absoluteString];      NSArray *components = [requestString componentsSeparatedByString:@":"];      if ([components count] > 1 && [(NSString *)[components objectAtIndex:0] isEqualToString:@"testapp"]) {          if([(NSString *)[components objectAtIndex:1] isEqualToString:@"alert"])           {              UIAlertView *alert = [[UIAlertView alloc]                                     initWithTitle:@"Alert from Cocoa Touch" message:[components objectAtIndex:2]                                    delegate:self cancelButtonTitle:nil                                    otherButtonTitles:@"OK", nil];              [alert show];          }          return NO;      }      return YES;  }     不過有一個開源工程大家可以看看，它允許javascript調用objective_c的方法。叫jsbridge-to-cocoa   http://code.google.com/p/jsbridge-to-cocoa/還有兩個相關工程WebViewJavascriptBridge 與 GAJavaScript 值得大家慢慢研究。 其他插入js代碼上面的功能我們可以封裝到一個js函數中，將這個函數插入到頁面上執行，代碼如下：if ([title compare: @"Google"]＝=NSOrderedSame ) { [webView stringByEvaluatingJavaScriptFromString:@"var script = document_createElement_x_x(‘script‘);" "script.type = ‘text/javascript‘;" "script.text = "function myFunction() { " "var field = document.getElementsByName(‘q‘)[0];" "field.value=‘朱祁林‘;" "document.forms[0].submit();" "}";" "document.getElementsByTagName_r(‘head‘)[0].a(script);"]; [webView stringByEvaluatingJavaScriptFromString:@"myFunction();"]; }看上面的代碼：a、首先通過js建立一個script的標籤，type為‘text/javascript‘。b、然後在這個標籤中插入一段字串，這段字串就是一個函數：myFunction，這個函數實現google自動搜尋索引鍵的功能。c、然後使用stringByEvaluatingJavaScriptFromString執行myFunction函數。 1. 一般調用將本機資料，封裝，直接作為JS的傳回值。如：擷取軟體的APPCode//擷取APPCode NSArray *_plist_paths=NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES); NSString *_plist_paths_path=[_plist_paths objectAtIndex:0]; NSArray *_plist_array= [_plist_paths_path componentsSeparatedByString:@"/"]; NSString *_appcode=[[NSString alloc]init]; for (NSString *item in _plist_array) {  if ([item length]==36) {   _appcode=item;   break;  } } NSLog(@"current appcode:%@",_appcode);//注入到js中 NSMutableString *_getApkCode=[[NSMutableString alloc]init]; [_getApkCode appendFormat:@" function  _getApkCode(){"]; [_getApkCode appendFormat:@"return ‘%@‘;",_appcode]; [_getApkCode appendString:@" }"]; [self.webView stringByEvaluatingJavaScriptFromString:_getApkCode]; [_getApkCode release];2.需要跟平台進行互動調用思路：1.製造含有一定含義的請求如：（location.href="download"）;2.在方法：-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType中，攔截：//testMall:http://192.168.1.20:8083本地測試頁面地址NSString *pre_download=[NSString stringWithFormat:@"%@downLoad",testMall]; if([url hasPrefix:pre_download]) { //下載代碼。。。。}3. 注意事項a.存在Iframe嵌套的頁面，js注入頁面注入JS是注入到,瀏覽器的html中,對於內部嵌套iframe架構的頁面，則無法調用到js。此時相當於調用父頁面的JS。可以通過parent+方法名，來調用你注入的ＪＳ。parent.parent的使用個數，可以是多個，不影響js的執行，如果少用parent,可能會導致，調不到你注入的JSb.存在互動的處理方法。推薦使用方法，iphone只負責提供js介面,不調用html內部或其他的js介面 樣本：htmlfunction addDownload(){url=‘www.XXX.XXX.zip‘;download(url);//調用iphone提供的js介面addDownloadTask_ret();//擷取iphone下載介面執行的下載結果，此處調的是本地的一個延遲方法}//擷取iphone下載介面執行的下載結果function addDownloadTask_ret(){var obj=getDownloadTaskResult();//此處為iphone提供的介面，負責返回當前下載執行情況的結果if(‘‘!=obj||undefined!=obj){//調用本地的一些後續處理方法。}else{setTimeout("addDownloadTask_ret2();",1000);}}  -------------------------------------------------

【iOS開發】UIWebView與JavaScript(JS) 回調互動