webview跟html通信的原理,1.iOS: webView与html的交互
摘要:
由于最近的项目中大部分功能需要 iOS 原生端与 html 进行交互才能完美实现,所以对 iOS 与 html 的交互方式进行了学习,这篇文章主要介绍 WebViewJavascriptBridge 框架的使用.至于原生的 JavaScriptCore.framework 就不多介绍了,同时在这里推荐一个比较好的博客.http://blog.csdn.net/baihuaxiu123/article/details/51674726
1.引入 webViewJavaScriptBridge 框架
1>通过cocoaPods
`pod 'WebViewJavascriptBridge', '~> 5.0'`
2>手动导入
直接拖到项目中,
3>框架介绍1.github地址:https://github.com/marcuswestin/WebViewJavascriptBridge
2.在把框架下载下来之后,里面会有一个 demo, 找到WebViewJavascriptBridge文件夹,里面共有8个文件,4个. h 以及对应的. m 文件,然后根据你项目中使用的是webView 还是WKWebView进行选择相应的框架.
框架文件
2.引入头文件
我当前的项目中使用的是 webView, 因此在创建webView 的界面引入的是#import"WebViewJavascriptBridge.h.
导入相应头文件
3.与 html 建立桥接
iOS 与 html建立桥接并不是仅仅是前端或者是原生端某一端处理就能解决的,必须要两端协作完成才行(一定要跟前端大哥处好关系!) 下面这些操作都是固定的,直接粘上去就行。
1>声明WebViewJavascriptBridge属性,这也就是我们所需要的桥,操作全靠它
创建桥接
2>OC 端进行架桥
建立桥接
从代码我们可以看出,这一步是让 webView 与 html 进行桥接,但是桥接不可能无缘无故就能搭建成功,所以还要在 html 的 js 上还要进行一步操作。
3>前端 js 需要写的东西
前端桥接方法声明
在 js 中,这个是对setupWebViewJavascriptBridge(callback)这个方法进行一个声明 ,这个也是固定的。如果要进行交互,一定要写的东西,直接将其粘贴在js 代码中就行。要交互的内容,要写在 js 相应的方法实现中,这个不需要我们 iOS 端来写,这个是 web 端进行书写的.
桥接后要进行的操作
4.iOS 端与 html 端互相的方法调用
使用此框架, iOS 与 html 交互的基本方法就是通过 registerHandler 和 callHandler两个方法进行实现的。OC端如果需要调用 html 中的方法,那么js 上需要注册方法(registerHandler),OC端需要进行 callHandler,只要对应上 handler名就能实现联通。
1>js 调用 OC 方法
OC操作:
iOS 注册 handler
注册方法时,两端一定要约定好 handler 名,因为这是进行搭桥识别的唯一途径,相当于一个 identity,js端只需要对应上相应的handler 名就行,这里的 handler 名是"jsCallIosBoard".
js 操作:
js 在 setup方法中进行 callHandler
此时 js 中的画笔$(".pen,.page4RSmallBi")被点击后,就会调用OC端中相应的方法.我这里是弹入了画板界面
2>OC 调用 js方法
和前面的道理相同,只需要在 js 中注册 handler,OC 端进行 callhandler 就可以了
js 操作:
js 在 setup 方法中进行注册
此时约定的 handler名是"jsCallIosBoard1"
OC端操作:
ios 端进行callHandler
根据 handler 名将数据传到前端,用于显示.
5.注意点
1> js 中所有registerHandler 和 callHandler 方法必须写在setupWebViewJavascriptBridge(function (bridge)的实现方法中,否则没有效果。
2> handler 名一定要是唯一的.
3> 在 registerhandler/callHandler 的 block 方法中,回调是在建桥后, callHandler /registerHandler成功之后立马就会进行回调。 所有如果工程中有传值需要注意下面这种情况:被调用的方法需要一定时间的延迟,才能得出结果,因为这个 block 主要是用来反馈搭桥是否成功,会被立刻调用(我的项目中, js 调用了 oc 的画板,在画板绘画后传到 js 中,使用回调是不行的,后来又从新注册一个用来专门传图片地址的方法)
4> 官方给的 demo 中, js 是直接写在 html 中的,而平常的开发中,前端大多数时候都是都是把 js 直接抽取出来,创建一个 js 文件,然后去引用,这两种性质是相同的,所有不要诧异,建议最好能跟前端学习一下 html, 并不难.
6.总结
iOS 与 html 进行交互的方法有很多种,这里说的是比较简单的一种,能在最快的时间内进行交互,不过最好还是能对桥接的原理进行了解,这样有助于开发,毕竟再好的第三方,也不如原生的好用(谁也不知道啥时候第三方就不能用了).
后言
互联网时代的今天,我们都是站在巨人的肩膀上看着这个世界,共勉!
webview跟html通信的原理,1.iOS: webView与html的交互相关推荐
- webview之JSB通信原理
1.前言 在这个移动互联网盛行的时代,移动应用的开发就需求量剧增,早期的移动端应用大都使用原生开发(android,ios),而现在的移动开发技术选型上基本都是混合开发(Hybrid),混合开发是一种 ...
- h5与IOS webview的爱恨情仇 —ios端图片拉伸bug
h5与IOS webview的爱恨情仇 -ios端图片拉伸bug 今天在ios的webview中图片出了一个诡异的bug,图片本来应该是width=0.18rem ,height=0.18rem;但是 ...
- 【Socket网络编程】6.两个既能收也能发的udp客户端进行通信的原理
两个既能收也能发的udp客户端进行通信的原理 发送数据时可能会用到INADDR_BROADCAST代表255.255.255.255的广播地址,作用范围只能在当前局域网. 接收数据可能会用到INAD ...
- ios 获取html的高度,iOS Webview自适应实际内容高度的4种方法详解
//第一种方法 - (void)webViewDidFinishLoad:(UIWebView *)webView { CGFloat webViewHeight=[webView.scrollVie ...
- 计算机串口连接原理,串口通信的原理及USB转串口通信
串口通信的原理 串口通信(SerialCommunicaTIons)的概念非常简单,串口按位(bit)发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口可以在使用一根线发送数据的同时用另一 ...
- Binder通信机制原理解析
Binder是什么?Binder有啥用?作为一个应用开发者,如果我们开发的应用不涉及跨进程通信(IPC),我想我们也不会去接触Binder.但不知你有没有发现,近来的Andorid面试,都会问及And ...
- ios实现wifi搜索连接_Wifi 定位原理及 iOS Wifi 列表获取
Wifi 定位原理及 iOS Wifi 列表获取 对于大家来说,Wifi 应该是一个很熟悉的词了,我们每天都可能在使用 Wifi 热点.Wifi 除了能给我们提供热点之外同时还有定位的作用, 现在移动 ...
- ios动画原理 modelLayer和presentationLayer以及点击交互
ios动画原理 modelLayer和presentationLayer以及点击交互 我们知道,iOS的动画,和其对应的layer有关. 之前在开发的过程中碰到一个问题,那就是,在一个视图的动画过程中 ...
- Vue 自定义指令 解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令 解决IOS webview input 获取焦点被键盘遮挡 创建自定义指令 在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
最新文章
- OpenCV-Python 相机校准和消除畸变
- 线上分享 | 浅谈中台对产品经理的价值
- 区块链世界中的IOTA:它是什么样的存在?
- hibernate查询缓存_在Hibernate中启用实体和查询缓存
- Product of Three Numbers(CF-1294C)
- idea 关闭检查更新_Intellij idea的抑制警告(SuppressWarnings)列表(正在持续更新)
- 干货分享 | 详解特征工程与推荐系统及其实践(附PPT)
- 谷歌语音识别功能Live Transcribe,让AI帮助语言障碍者“说话”
- Delphi调用外部程序详解
- 间接寻址级别不同_「计算机组成原理」:常见的指令寻址方式
- [arduino]-序言:面向仅有C语言基础之人的单片机开发板
- 用Python进行数学建模(一)
- 天刀 沧海云帆 服务器位置,1月第一批 天刀沧海云帆大区合服公告
- 玩家访问网站自动弹窗加QQ群方法以及详细代码
- 电子护照阅读器现身出入境办证大厅
- 《Java编程思想》 第6章 访问权限控制
- 最新版X-Helios、X-Medusa、X-Ladon、X-Argus逆向与风控分析
- ODrive配置云台电机GIMBLE_TYPE
- Zer0pts CTF 2020的web赛后记录+复现环境
- C语言动态开辟多维数组空间
热门文章
- 暴走大侠显示进入服务器失败,暴走大侠:常见问题详解,再遇见这样的问题也不再迷糊...
- java日历事件处理_日历表的事件处理和管理(刘静)
- 华为鸿蒙系统还没发布吗,华为没有孤军奋战,合作伙伴“雪中送炭”,鸿蒙系统正式发布!...
- 鸿蒙系统会不会影响游戏,令人担心,鸿蒙系统会不会让人失望?未来难说
- c语言fopen_s的用法,fopen和fopen_s用法的比较
- linux内核调度 0号进程,Linux内核源代码情景分析---第四章 进程与进程调度
- mysql 导入 mssql_MySQL(csv,text)导入mssql使用方法
- 计算图片相似度的方法
- 修改MYSQL最大连接数的3种方法
- Mysql中limit的优化