iOS中JavaScript和OC交互

最新推荐文章于 2024-09-20 15:37:36 发布

细粉条

最新推荐文章于 2024-09-20 15:37:36 发布

阅读量1.1k

点赞数

分类专栏： iOS 文章标签： objective-c

iOS 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在iOS开发中很多时候我们会和UIWebView打交道，目前国内的很多应用都采用了UIWebView的混合编程技术，最常见的是微信公众号的内容页面。前段时间在做微信公众平台相关的开发，发现很多应用场景都是利用HTML5和UIWebView来实现的。

机制

Objective-C语言调用JavaScript语言，是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。

JavaScript语言调用Objective-C语言，并没有现成的API，但是有些方法可以达到相应的效果。具体是利用UIWebView的特性：在UIWebView的内发起的所有网络请求，都可以通过delegate函数得到通知。

示例

下面提供一个简单的例子介绍如何相互的调用，实现的效果是在界面上点击一个链接，然后弹出一个对话框判断是否登录成功。

（1）示例的HTML的源码如下：

 
  <html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta content="always" name="referrer" />
        <title>测试网页</title>
    </head>
    <body>
        <br />
        <a href="devzeng://login?name=zengjing&password=123456">点击链接</a>
    </body>
</html> 
 

（2）UIWebView Delegate回调方法为：

 
  - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSURL *url = [request URL];
    if([[url scheme] isEqualToString:@"devzeng"]) {
        //处理JavaScript和Objective-C交互
        if([[url host] isEqualToString:@"login"])
        {
            //获取URL上面的参数
            NSDictionary *params = [self getParams:[url query]];
            BOOL status = [self login:[params objectForKey:@"name"] password:[params objectForKey:@"password"]];
            if(status)
            {
                //调用JS回调
                [webView stringByEvaluatingJavaScriptFromString:@"alert('登录成功!')"];
            }
            else
            {
                [webView stringByEvaluatingJavaScriptFromString:@"alert('登录失败!')"];
            }
        }
        return NO;
    }
    return YES;
} 
 

说明：

1、同步和异步的问题

（1）Objective-C调用JavaScript代码的时候是同步的

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

（2）JavaScript调用Objective-C代码的时候是异步的

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

2、常见的JS调用

（1）获取页面title

NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];

（2）获取当前的URL

NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];

3、使用第三方库

https://github.com/marcuswestin/WebViewJavascriptBridge

使用案例

1、动态将网页上的图片全部缩放

JavaScript脚本如下：

 
  function ResizeImages() {
  var myImg, oldWidth;
  var maxWidth = 320;
  for(i = 0; i < document.images.length; i++) {
      myImg = document.images[i];
      if(myImg.width > maxWidth) {
          oldWidth = myImg.width;
          myImg.width = maxWidth;
          myImg.heith = myImg.height*(maxWidth/oldWidth);
      }
  }
} 
 

在iOS代码中添加如下代码：

 
  [webView stringByEvaluatingJavaScriptFromString:  
 @"var script = document.createElement('script');"   
 "script.type = 'text/javascript';"   
 "script.text = \"function ResizeImages() { "   
     "var myimg,oldwidth;"  
     "var maxwidth=380;" //缩放系数   
     "for(i=0;i <document.images.length;i++){"   
         "myimg = document.images[i];"  
         "if(myimg.width > maxwidth){"   
             "oldwidth = myimg.width;"   
             "myimg.width = maxwidth;"   
             "myimg.height = myimg.height * (maxwidth/oldwidth);"   
         "}"   
     "}"
 "}\";"   
 "document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"]; 
 

重要的参考资料

1、《关于UIWebView和PhoneGap的总结》

2、《iOS开发之Objective-C与JavaScript的交互》

原文：点击打开链接

参考示例：点击打开链接

-----------------------------------------------------------------------------------------------

oc与js互相调用目前我知道的时主要有4种直接的方式：

1. 苹果的javascriptcore.framework框架;

2.跨平台cordova框架;

3.oc第三方WebViewJavascriptBridge；

4.还有直接就是设置自定义协议，然后在 webView的"- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType"代理里面判断URL协议。便可以间接调用oc.

而通过 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script; 方法直接执行一段js代码。

苹果在iOS7中开放了javascriptCore.framework框架;这个框架大大简化了js 和oc 通信。

网上找了好多地方，发现就这篇博客关于avascriptCore.framework写的的最好。javascriptCore.framework很灵活，很强大。内容较多就不说了，看人家写的博客，很不错。

http://blog.iderzheng.com/ios7-objects-management-in-javascriptcore-framework/

可以参考这里学习。

跨平台cordova框架,提供了好多插件，对开发者以js形式提供调用各种原生功能，比如摄像头，罗盘仪之类的本机硬件的。你还可以自己定义插件，通过js调用本地代码。他还可以提供一个打包app。这个呢个人感觉就是适用于以h5为主，原生代码辅助的基础上，一套代码在各个平台上。比较方便不懂原生开发又想省钱的公司。就是目前,用户体验太差，而且cordova文档更新简直太慢，一路学习都是坑。俗话说的“爱一个人让他学习phonegap,恨一个人就让他学习phonegap吧”

参考地址 cordova官网文档：http://cordova.apache.org/docs/en/5.0.0/

oc第三方WebViewJavascriptBridge；这个是封装好的一个oc开源小框架，提供了2套oc和js之间互相调用的方法。这个比较合适混合项目，oc为主的项目。参考见WebViewJavascriptBridge的github上的网址：

点击打开链接

第四种方法，在 webview的代理里根据自动以URL协议来js调oc, 不是很推介这个，这个必须在这个协议里才可以实现通信，如果多几次调用，里面会出现难以想象个if判断语句，这种很可怕。。

综合以上，鄙人觉得还是使用WebViewJavascriptBridge或者javascriptcore，比较合适混合开发。

假如是以为h5为基础的项目就用cordova。

至于第4种方法，看情况而定了。