浅谈JSBridge

1 JSBridge在Hybrid开发中的做用

JSBridge是链接Native(客户端)和JavaScript前端的桥梁，经过JSBridge 两端的代码才能够通讯。

简单的说，JSBridge 一方面给js提供了调用native的方法，而反过来，它也承接了native调用js事件队列的封装。JSBridge构建了js和native之间的通讯，并且是双向的。

注：scheme协议：能够简单理解为自定义的url 形式如：[scheme:][//domain][path][?query][#fragment] 举个栗子：jsbridge://openPage?url=https://www.baidu.com/

2 js调用native的方法

2.1 native经过拦截约定好的scheme协议 去执行一些native的方法

约定固定格式的scheme协议，例如：[customscheme:][//methodName][?params={data, callback}]

customscheme：自定义须要拦截的scheme
methodName：须要调用的native的方法
params：传递给native的参数 和 回调函数名
复制代码

Native在监听到这种地址以后，就不会加载内容，而是执行相应的某段逻辑。

发起这样一个网络请求有两种方式：1. 经过localtion.href；2. 经过iframe方式； 经过location.href有个问题，就是若是咱们连续屡次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。

因此更稳妥的方式是经过iframe, 简单的例子以下：

var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';  
var iframe = document.createElement('iframe');  
iframe.style.width = '1px';  
iframe.style.height = '1px';  
iframe.style.display = 'none';  
iframe.src = url;  
document.body.appendChild(iframe);
// 100毫秒后移除
setTimeout(function() {  
    iframe.remove();
}, 100);
复制代码

而后Webview就能够拦截这个请求，而且解析出相应的方法和参数。

2.2 经过在webview中挂载到全局对象上的对象方法来调用native的方法

举个栗子：window.JSBridge.openPage("https://www.baidu.com") native注入到webview全局对象为JSBridge，经过全局对象JSBridge 能够调用挂载在其上的方法，来触发调用native的方法。

注： 也就是说，在native的开发中，开发者能够给webview注入全局变量并挂载在window对象上，这样前端js就能够经过window上全局对象方法 来调用一些native的方法。

前端须要去了解这个全局对象，是在webview初始化时候注入的，仍是在页面加载完以后注入的，也就是同步注入仍是异步注入的问题 若是是异步注入的，则须要前端的代码中，添加对象的ready监听机制

2.3 android webview还会拦截 js调用的alert、confirm、prompt方法

经过在js里使用这三个方法 也能进行js对native的通讯,通常是prompt，前端不咋用

3 native调用js的方法

3.1 IOS

ios能够经过webview的evaluateJavaScript:completionHandler方法，该方法返回js脚本的执行结果。

// Swift
webview.stringByEvaluatingJavaScriptFromString("Math.random()")  
能够看到它就是调用了window下的一个对象（执行了Math.random()方法），因此若是咱们要让native来调用js写的方法，就要让这个方法在window下能访问到。
复制代码

3.2 Android

android能够经过webview的loadUrl()去调用js代码，也可使用evaluateJavascript()来调用js代码

android中evaluateJavascript的使用比loadUrl更高效 也更简洁，惟一很差的是 须要android 4.4以上的版本支持

4 JSBridge如何引用

4.1 由 Native 端进行注入

注入方式和 Native 调用 JavaScript 相似，直接执行桥的所有代码。

它的优势在于：桥的版本很容易与 Native 保持一致，Native 端不用对不一样版本的 JSBridge 进行兼容；与此同时，它的缺点是：注入时机不肯定，须要实现注入失败后重试的机制，保证注入的成功率，同时 JavaScript 端在调用接口时，须要优先判断 JSBridge 是否已经注入成功。

4.2 由 JavaScript 端引用

直接与 JavaScript 一块儿执行。

与由 Native 端注入正好相反，它的优势在于：JavaScript 端能够肯定 JSBridge 的存在，直接调用便可；缺点是：若是桥的实现方式有更改，JSBridge 须要兼容多版本的 Native Bridge 或者 Native Bridge 兼容多版本的 JSBridge。

参考资料

JSBridge的原理

Hybrid开发中JSBridge的实现

本文使用 mdnice 排版