这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

简单理解

之前在做H5项目时，使用Jsbridge和native进行交互，比如唤起native的分享功能。Jsbridge见名知意就是native和H5页面的进行交互的桥梁。其实就是对native和H5交互方法的封装的一个库，主要包括对各个版本交互兼容性的处理，以及ios和安卓的实现差异的封装。

原理

native调用js

native调用js的方式比较简单，webView提供了执行JS代码的api。

webView.evaluateJavascript()

js调用native

然而js调用native，么有直接api可以调用。所以需要可爱的程序猿们就想到了曲线救国的方式，来实现js调用native。 现在主流的方案有两种：

1. native直接将自己的API注入到H5页面的window对象上。

安卓 Android 4.2以下: 使用 addJavascriptInterface。 Android 4.2及以上：使用 @JavascriptInterface。 IOS UIWebView使用postBridgeMessage WKWebView使用addScriptMessageHandler

2. 双方定义一个协议，然后在一些方便携带协议信息（需要调用的方法名称，参数，回调等）的事件触发时，对事件进行拦截，从而获取到需要调用的native方法名称，所需参数，以及完成后回调方法名等，最后完成相关native方法的调用。

安卓 两种方式：

1.通过shoudOverrideUrlLoading来对URL进行拦截，解析了；

2.通过重写prompt,alert、confirm中的任一方法，来拦截其携带的数据参数。一般都是prompt，因为js中这个方案用的较少。

IOS发起这种请求的方式有两种：

1. location.href;

2.iframe.src。

一般都用iframe。因为location。href,如果被连续多次调用，native只会拿到最后一次的值，前面的请求会被忽略。 具体实现是： 在H5在页面中，创建一个隐藏的iframe，src就以Jsbridge协议开头，并且用被调用的native的方法名和参数键值对为参数的URL，native拦截到后，会解析这个URL，然后执行对应的native方法。

总结

以上就是我主要通过一些文章对Jsbridge的理解。理解的比较浅显，尤其是实现细节方面，有不准确之处，欢迎大家指正。