【iOS开发】UIWebView与JavaScript(JS) 回调交互

sky_2016

关注

原创最新推荐文章于 2025-09-15 16:32:42 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

iOS webView的高级用法之JS交互，js与oc的相互调用（JavaScriptCore）重要的事情放前面 github地址：https://github.com/horisea/JSCallOCTest 欢迎star 前言：说起JS交互，很多童鞋会黯然色变，感觉很高深的样子。大部分小伙伴只知道一种，哪一种我也说说吧。 1.在webView中将要请求的时候，拦截URL，进行重定向，然而该场景实用有限，网上资料也很多下面说说另一种交互方式。 - (BOOL)webV... 阅读详情

很多关于objc 与 js 交互的文章都比较适用于 mac开发，iOS的webview 还是有所不一样，

参考：http://blog.sina.com.cn/s/blog_693de6100102vhuh.html

本文提供了一个很好解决UIWebView内js和objc 交互的思路。

自然，从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的方法，如何调用，上面有介绍。

<span style="background-color: rgb(255, 255, 255);">- (IBAction)btnClick {
    [self.webView stringByEvaluatingJavaScriptFromString:@"showAlert()"];
}</span>

那么我们能不能通过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()">点 击</button>

最后我们在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;  
 }  