iOS与网页JS交互
来源:互联网 发布:淘宝客服提成2个点 编辑:程序博客网 时间:2024/05/30 04:35
随着移动APP的快速迭代开发趋势,越来越多的APP中嵌入了html网页,但在一些大中型APP中,尤其是电商类APP,html页面已经不仅仅满足展示功能,这时html要求能与原生语言进行交互、相互传值。比如携程APP中一个热门景点的网页中,点击某个景点,可以跳转到原生中的该景点详情页控制器。
为此,我整理了三种最常用最便捷有效的OC与JS交互的方式,供大家学习交流。
第一种:JS给OC传值。
1. 技术方案:使用JavaScriptCore.framework框架
2. 使用场景: 网页中代码中的某个方法,比如点击事件方法,将该方法的参数传值给OC,供OC使用。
比如:携程APP中一个热门景点的网页中,有很多个热门景点,点击某个景点的图片或名称,可以跳转到原生中的该景点详情页控制器。3. 代码实现如下:
OC里要实现的代码:
拖入JavaScriptCore.framework静态库,遵守UIWebViewDelegate
代理协议。
在-webViewDidFinishLoad:方法里编写如下代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
其中 passValue 是JS的函数名,得到的 arg数组 里面为JS的 passValue 函数的参数,即 JS要传给OC的参数。
JS里要实现的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
在需要给OC传值的函数里(例如:testClick()
)直接调用 passValue()
函数,将值传进去即可。
第二种:JS给OC传值。
1. 技术方案:使用自定义url方法,每次点击网页
2. 使用场景: 网页中代码中的某个方法,比如点击事件方法,将该方法的参数传值给OC,供OC使用。
比如:携程APP中一个热门景点的网页中,有很多个热门景点,点击某个景点的图片或名称,可以跳转到原生中的该景点详情页控制器。3. 代码实现如下:
JS里要实现的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在需要给OC传值的函数里(例如:testClick()
)写如上格式的代码。
其中 objc://
是自定义的协议头,str1
与str2
为JS要传给OC的值。
OC里要实现的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
第三种:利用第三方库实现JS与OC的相互传值。
1. 技术方案:使用WebViewJavascriptBridge三方库
2. 使用场景: 网页中代码中的某个方法,比如点击事件方法,将该方法的参数传值给OC,供OC使用。
比如:携程APP中一个热门景点的网页中,有很多个热门景点,点击某个景点的图片或名称,可以跳转到原生中的该景点详情页控制器。
或者将原生中的用户信息传递给网页,以便其个性化展示3. 代码实现如下:
OC传值给JS
JS里需要实现的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
OC里需要实现的代码:
导入第三方库WebViewJavascriptBridge;遵守UIWebViewDelegate
;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS传值给OC
JS里需要实现的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
OC里需要实现的代码:
导入第三方库WebViewJavascriptBridge;遵守UIWebViewDelegate
;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- iOS与网页JS交互
- iOS与网页JS交互
- iOS网页-JS交互(UIWebView)
- iOS与网页JS交互,看我就够了
- iOS与网页JS交互,看我就够了
- ios 与js 交互
- iOS 与 JS 交互
- iOS 与 js 交互
- ios与js 交互
- iOS与JS交互
- iOS 与 JS 交互
- JS 与 iOS 交互
- IOS 与 JS 交互
- ios与js交互
- iOS与JS交互
- iOS与JS交互
- iOS与JS交互
- iOS与js交互
- 文章标题
- 网站添加QQ登陆,QQ登录报错,是为什么呢
- Oracle数据库挂了后weblogic的日志
- MyEclipse 8.5反编译插件jad安装方法
- VS2005 MFC C/C++ 操作excel【网上找了好多列子,都不合适,自己总结一下】
- iOS与网页JS交互
- 怎么让adb识别修改了VID和PID的手机(移动设备)
- 网络通信_UDP客户端以及服务器
- 调用JNI函数
- 在局域网内用自己的机子当服务器让外网访问测试回调
- WebStorm开发工具设置React Native代码智能提醒
- unity3d随笔-5
- SQL Server,MySQL,Oracle三者的区别
- 如何成为高级程序员