接着上篇我们继续!

三.JSBridge的完成基本原理。

互联网端和Native能够与Client/Server方式相较为,当互联网端启用当地插口时,如同Client向Server端推送一个要求一样,JSBridge在这儿饰演了与HTTP协议书类似的人物角色,完成JSBridge关键有二点:

把Native端当地插口封裝成JavaScript插口。

将互联网端JavaScript插口封裝成本费地插口。

3.1 Native->Web。

第一,Native端启用Web端,这一点非常简单,JavaScript做为一种表述语言表达,较大的特性便是能够在一切時间、一切地址根据编译器实行JS编码,因而能够将JavaScript编码字符串拼接起來,键入JS在线解析实行,JS在线解析便是webView。

3.2 Web->Native。

互联网启用互联网端关键有二种方法。

3.2.1提取网页页面要求的URLSchema。

URLSchema是类型URL的要求文件格式,文件格式以下:

:///?#fragment

您能够订制JSBridge通讯的URLSchema,比如jsbridge://showToast?text=hello。

网Native加载WebView后,Web推送的全部要求都将根据WebView部件,因而Native能够调用WebView中的方式 ,提取Web进行的要求,并分辨要求文件格式:

假如合乎大家订制的URLSchema,剖析URL,得到有关实际操作和实际操作,随后启用当地Native方式 。

假如不符大家订制的URLSchema,大家会立即分享并规定真实的服务项目。

互联网推送URL要求的方式 有下列几类:

a标签

location.href

使用iframe.src

发送ajax请求

这些方法,a标签需要用户操作,location.href可能会引起页面的跳转丢失调用,发送ajax请求Android没有相应的拦截方法,所以使用iframe.src是经常会使用的方案

安卓提供了shouldOverrideUrlLoading方法拦截

IOSUIWebView使用shouldStartLoadWithRequest,

IOSWKWebView则使用decidePolicyForNavigationAction

这类方式 从初期就存有,兼容模式非常好。但因为是根据URL的,长短比较有限,不形象化,数据类型比较有限,创建要求必须時间。

3.2.2向Webview引入JSAPI。

该方式 根据webView出示的插口,App将Native的有关插口引入JS的Context(window)的目标中,一般来说该目标内的方式 名与Native的有关方式 名同样,web方能够立即在全世界window下应用该全世界JS目标

安卓系统(4.2+)出示安卓系统JavascriptInterface引入:

立即在互联网端启用此方式 :

window.NativeBridge.showNativeDialog('hello');

3.3启用带到调。

之上提及了Native,Web中间的双向通信二种方法,可是立在一端還是一个单边通讯的全过程,例如立在Web的视角:Web调用Native的方法,Native立即开展有关实际操作,可是不可以将結果退还给Web,可是在具体应用中,常常必须退还实际操作結果,即JS回调函数。

因而在对端实际操作并回到結果,有键入有輸出才算是详细的启用,那麼怎样完成呢?

实际上,它能够依据之前的单边通讯来完成。在我们启用一端时,我们在主要参数中加上一个callbackId标识相对的回调函数。对端接受到启用要求后,开展操作过程。如果有callbackId,对端将再度启用,結果和callbackId将回到。该端能够依据callbackId配对相对的回调函数,并将結果键入实行。

四.开源系统JSBridge。

完成详细的JSBridge相对性繁杂,必须考虑到一些中低端型号规格的兼容模式和同歩异步调用。幸运的是,早已有开源系统JSBridge供大家立即应用:

DSBridge关键以引入API的方式,DSBridgeforAndroid,DSBridgeforIOS。

JsBridge,主要是提取URLSchema,JsBridge。

以DSBridge-安卓系统为例子:

Hybrid开发设计是当今移动智能终端开发设计的流行技术性选择项,在其中Native和Web终端设备的双向通信离不了JSBridge。

在其中,表面中,Native调用Web端是立即在JS的Context上实行JS编码,而Native端启用Native端有二种方式 ,一种是根据URLSchema的阻拦实际操作,另一种是将Api引入JS的Context(window),在其中引入Api是现阶段最好是的挑选。全启用是双向通信,必须一个回调函数作用,技术性完成上应用了2次单边通讯。

android js桥接,聊一聊桥接(JSBridge)的原理(下)相关推荐

  1. Android JS 通过JSBridge(BridgeWebView)相互调用详解

    一.JSBridge GitHub链接 https://github.com/lzyzsd/JsBridge 二.AndroidStudio配置JsBridge 1.根目录Gradle配置 maven ...

  2. jsbridge实现及原理_Android JSBridge的原理与实现

    原标题:Android JSBridge的原理与实现 JSBridge 在Android中,JSBridge已经不是什么新鲜的事物了,各家的实现方式也略有差异.大多数人都知道WebView存在一个漏洞 ...

  3. JSBridge的原理与实现

    为什么要用 JSBridge 顾名思义,JSBridge是js和Native之间通信的桥梁. Android4.2以下,addJavascriptInterface方式有安全漏洞. url schem ...

  4. 从渲染页面的角度来聊一聊浏览器的工作原理

    从渲染页面的角度来聊一聊浏览器的工作原理 页面内容快速加载和流畅的交互是用户希望得到的Web体验,因此,开发者应力争实现这两个目标. 了解如何提升性能和感知性能,有助于了解浏览器的工作原理. 概述 快 ...

  5. android js接口调用方法,详解Android JS相互调用

    最近在研究Android.JS相互调用,之前没怎么接触过,只知道loadUrl()就可以加载一个网页了,研究过之后发现Android可以调JS,JS也可以调Android原生控件,很开心啊.下面小编就 ...

  6. RHEL 6上KVM的安装配置及使用-将物理接口桥接到桥接器

    作业环境服务器端 操作系统:Red Hat Enterprise Linux Server release 6.0 (Santiago) KVM:qemu-kvm-0.12.1.2-2.113.el6 ...

  7. react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output and

    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output and ...

  8. php new对象 调用函数,关于JS中new调用函数的原理介绍

    这篇文章主要介绍了关于JS中new调用函数的原理介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数) ...

  9. Android中Intent连接不同组件的原理

    一.什么是Intent 1.概念 Intent翻译过来是"意图.目的"的意思,是连接四大组件的桥梁,作为中介传输信息. 2.类型 Intent分为两种,显示和隐示.显示需要指定目标 ...

  10. Android 颜色渲染(二) 颜色区域划分原理与实现思路

    在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoShop中的调色板应用 首先还是看一下最终的实现效果:    ...

最新文章

  1. 内存溢出和内存泄漏的定义,产生原因以及解决方法(面试经验总结)
  2. 教你10招最有效防电脑辐射方法
  3. Mysql优化(三):优化order by
  4. 这样写Java,同事直呼666
  5. Qt多线程端口扫描工具(开源)
  6. http 请求_HTTP请求方法有哪些?
  7. HDU3544 不平等博弈
  8. 将你的掘金小册制作成一整本PDF
  9. android 分组柱状图_Android自定义柱状图控件
  10. simulink中不能改名_王者荣耀:万格改名教学,空白名、重复名、个性符号名改法技巧!...
  11. 国外游戏开发公司10强
  12. Unity3D项目之游戏场景小地图制作
  13. 零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单
  14. linux vdi,linux – 调整vdi大小不能正常工作
  15. 【GAMES101】课堂笔记1--计算机图形学概述
  16. 数字电路2. OC门、OD门、三态门
  17. linux xunsou_Linux 之 xunsearch
  18. 输电线路防外力破坏图像数据集(1500张图像,VOC标签,5类目标)
  19. 互联网人才泡沫:百度腾讯阿里大打人才争夺战
  20. 金蝶kis专业版显示服务器无效,金蝶KIS专业版常见问题解决方法

热门文章

  1. 555 定时器的 3 种用法判断和解释
  2. win10计算机不显示usb,win10插入U盘不显示怎么办_解决win10u盘插电脑上不显示的办法...
  3. sci论文发表的难度高吗
  4. 金蝶商贸版,后台修改序时簿过滤条件
  5. docker下安装wekan看板工具
  6. gentoo适合做服务器系统吗,Mandriva、Gentoo发行版
  7. 计算机cpu型号有,Intel九代CPU型号都有哪些?盘点目前已知的Intel处理器型号大全...
  8. Elasticsearch+Hbase实现海量数据秒回查询
  9. 人人网主页登录_人人网回归,你的前任和全部黑历史将被翻开!买账吗?
  10. ubuntu18.04配置邮件服务: postfix+dovecot+roundcube