一、非引入JsBridge或WebViewJavascriptBridge库的方案

1、H5与iOS/Android的通信方式

H5 webview与iOS通信

① 原生iOS调用js的方法（前端工程师可简单理解，挂载在windows对象下的js方法iOS原生都可以调用触发）
原生iOS可以访问webview全局对象（windows对象下个的属性），所以当我们要让iOS调用我们js的某些方法的可以在window下添加一个jsBridge对象，里面可以定义给iOS调用的一些js方法。

②Js调用原生iOS(OC或Swift)方法
反过来，JS调用原生iOS并没有现成的API可以直接拿过来使用，而是间接的利用一些方法来实现---->利用ios的UIWebview组件的特性，在UIWebview内发起的所有的网络请求，都可以通过delegate函数在native层得到通知。简单点说就是我们H5页面url路径的跳转请求，原生iOS这边都可以抓到，利用此特点我们可以像在get请求URL后面带参数一样带参数让原生iOS去取到。（利用url的这个过程需要前端和原生这边约定好这个url的格式，例如：jsbridge://methodName?param1=value1&param2=value2，只要以jsbridge://开头的地址就不要让webview进行页面的跳转，转而执行相应的逻辑，原生可以把要传给vebview的某个数据挂在到window下的某个属性上，js通过window.属性名取到原生传来的数据）

上面提到的url的跳转让原生去拦截的方案，js这边实现方式有两种：
①window.location.href
②利用页面中嵌套的iframe的url(将iframe的长宽都设为很小或者0，取到数据后再移除这个iframe)
建议使用②iframe的方式，因为如果我们连续多次修改window.location.href的值，在Native层只能接收到最后一次请求，前面的请求都会被忽略掉。

iframe方式前端代码

H5 webview与Android通信

1、目前js有三种调用原生Android的方式：

① 和上面Js调用原生iOS(OC或Swift)方法一样，通过schema方式，Native使用shouldOverrideUrlLoading方法对url协议进行解析。这种js的调用方式与ios的一样，使用iframe来调用native代码。(原理和使用方式与上面讲的iOS拦截url的一样，建议ios和android端都采用此方式，那么前端也将方便做兼容些)

② 往webview里面注入方法，前端角度理解就是Android创建了一个方法，添加到我们js的window对象里面了，直接调用就可以触发原生的方法，如下代码：

实例代码

③ 使用prompt、console.log、alert等方式，这三个方法对js里是属于原生的，例如当我们js代码中使用alert(data)时，原生这边可以抓到data数据，然后它们进行相应的操作，一般我们使用prompt，因为这个在js代码里面使用的很少，用来和native通讯副作用较少。

2、原生Android调用javascript方法通过在android代码里使用webview的loadUrl进行调用。

安卓中的代码如上，需要被原生调用的js方法放全局

2、js调用Native方法的封装，兼容安卓和ios，供参考

兼顾iOS和Android通信的js代码

二、引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案

安卓端的JsBridge：    https://github.com/lzyzsd/JsBridge
iOS端的WebViewJavascriptBridge：  https://github.com/marcuswestin/WebViewJavascriptBridge

实际项目中有相当一部分的原生内嵌H5页面混合开发的项目采用这个方案，使用上来说也很简单，其实就是对上面第一部分讲的几种实现原生与H5页面通信方式的一个封装。开发中安卓和iOS要分别引入JsBridge或者WebViewJavascriptBridge，Native这边代码参照官上面的github地址的代码去配置，下面我仅以前端的角度来讲解如何用代码去实现：
①  首先安卓、iOS、web前端三方要在一起定义好需要使用的接口的方法名及传递的参数，三方统一，由于h5这边是要实现一套代码和Native两方通信，所以如果可以的话由前端来定义各个方法及传递的方式，原则上来说，web前端这边是作为需求方的，我们定义好方法iOS和安卓设置此方法让我们调用。（当然我们也可以注册方法，让Native来调用我们的方法）

②iOS和安卓端的代码不罗列，基本思路就是他们要用registerHandler注册一个方法，js这边通过callHandler来调用这个方法，同时js这边也可以用registerHandler注册一个方法，Native端通过callHandler来调用。下面的代码以我用的react框架来写。
特别说明一下：js中与Native通信的所有方法的注册和调用都必须包裹在下图的setupWebVie wJavascriptBridge函数里面。

前端和Native通信方法外层包裹的固定代码