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

机制

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

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

示例

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

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

1

2

3

4

5

6

7

8

9

10

11

12

<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回调方法为：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

- (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脚本如下：

1

2

3

4

5

6

7

8

9

10

11

12

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代码中添加如下代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

[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();"];

iOS中JavaScript和OC交互 －－by 胡 xu的更多相关文章

  1. iOS中JavaScript和OC交互

    转载自:http://www.devzeng.com/blog/ios-uiwebview-interaction-with-javascript.html 还可参考的文章:http://blog.c ...

  2. iOS中JS 与OC的交互(JavaScriptCore.framework)

    iOS中实现js与oc的交互,目前网上也有不少流行的开源解决方案: 如:react native 当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framewo ...

  3. ios中javascript直接调用oc代码而非通过改变url回调方式(转)

    之前一个ios项目中,需要通过UIWebview来打开一个静态页面,并在静态页面中 调用相关object-c代码. 一.以前使用js调用object-c的方法 关于如何使用javascript调用ob ...

  4. UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

    一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...

  5. iOS中UIWebView使用JS交互

    iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...

  6. iOS中UIWebView使用JS交互 - 机智的新手

    iOS中偶尔也会用到webview来显示一些内容,比如新闻,或者一段介绍.但是用的不多,现在来教大家怎么使用js跟webview进行交互. 这里就拿点击图片获取图片路径为例: 1.测试页面html & ...

  7. iOS UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  8. UIWebView中javascript与Objective-C交互、获取摄像头

    UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...

  9. CEF中JavaScript与C++交互

    在CEF里,JS和Native(C/C++)代码能够非常方便的交互,这里https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegr ...

随机推荐

  1. VUE的学习_从入门到放弃（一）

    一.vue的功能及作用 工作方式如下 1.不用操作DOM 2.单页面应用web项目 简称:SPA 3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法,微信小程序/MpVue... ...

  2. k8s loadbalancer与ingress实践

    k8s可以通过三种方式将集群内服务暴露到外网,分别是NodePort.LoadBalancer.Ingress,其中NodePort作为基础通信形式我们在<k8s网络模型与集群通信>中进行 ...

  3. 【Python+Django+Pytest】数据库异常pymysql.err.InterfaceError: (0, '') 解决方案

    问题背景: 接口自动化测试平台,在执行测试案例之外,还需要做以下五件事情(或步骤): 1.查询用户在数据准备中预置的测试套件层数据初始化相关sql  (setUp_class方法中) 2.查询用户在数 ...

  4. 在使用jjwt时在配置文件中设置过期时间，取到的结果为0的原因

    在设置了过期时间后感觉没有起作用,打印日志查看了下为0,因为生成token的文件在一个公共模块中,而过期时间设置在服务模块 中的配置文件中. 原因是:没有为设置getter和setter方法 来自为知 ...

  5. Word2010邮件合并制作成绩单

    原文链接: https://www.toutiao.com/i6488941003494392333/ 准备数据源: 选择"邮件"选项卡,"开始邮件合并"功能组 ...

  6. “伏魔”赏金 ｜ WebShell检测之「模拟污点引擎」首次公测，邀你来战！

    安全是一个动态的过程,攻防对抗如同在赛博世界里降妖伏魔,其要义是:取彼之长,补己之短.--伏魔引擎的诞生 伏魔引擎挑战赛 注册时间: 2022.01.10 00:00:00 - 2022.01.24 ...

  7. [javaweb]strut2-001漏洞分析

    Strut2-001 漏洞描述 框架解析JSP页面标签时会对用户输入的Value值获取,在获取对应的Value值中递归解析%{.}造成了二次解析,最终触发表达式注入漏洞,执行任意代码 影响版本 2.0 ...

  8. Tomcat部署启动时发生错误

    Tomcat启动后项目地址显示404:源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示. 严重: ContainerBase.addChild: start: org.apache. ...

  9. 【记录一个问题】golang中使用sync.Pool反而造成了负优化

    之前有这样的代码:从http收数据后,进行snappy解码: dst := make([]byte, 0, len(httpRequestData)*5) dst, err = snappy.Deco ...

  10. 【get√】发现一个redis zset的新玩法：用ZINTERSTORE把value都置0

    直接上指令: redis-cli -h 192.168.0.5 -p 6379 -a test123 DEL __temp_ahfu1 ZADD __temp_ahfu1 1 0.0.18.185_0 ...