js与native交互方式总结

javascript core

可以理解成native往webview context注册了一个全局方法，通过这个方法可以使用一些native提供的能力。

url scheme

系统提供的通过某个特定前缀url拉起app的功能，url的path可以指定功能、query能携带参数。
优点：

• 实现简单
• 行为统一（例如想点击链接创建一个新的webview打开指定页面，可以直接把scehme url赋给a标签的href）

缺点：

• 不支持回调

jsbrigde

• 支持回调

缺点：

• 实现稍微复杂
• 前端需要包装统一调用模块

题外话

jsbridge是通过iframe发出请求的（试了image等媒体标签不行，location.href可以，猜测shouldoverideUrlLoading只会拦截webview的请求），但是处理iframe的时候有些点需要注意。

 function openUrl(url){
    var iframe = document.createElement('iframe');

    iframe.style.cssText = 'display:none;width:0px;height:0px;';
    if (exports.iOS) {
        /*
          ios 必须先赋值, 然后 append, 否者连续的 api调用会间隔着失败
          也就是 api1(); api2(); api3(); api4(); 的连续调用,
          只有 api1 和 api3 会真正调用到客户端（iOS13.5无法复现这个问题）
          */
        iframe.src = url;
    }
    (document.body || document.documentElement).appendChild(iframe);
    /*
      android 这里必须先添加到页面, 然后再设置 src  
      先设置 src 再 append 到页面, 会导致在接口回调(callback)中嵌套调用 api会失败,
      iframe会直接当成普通url来解析
      */
    if (exports.android) { // android 必须先append 然后赋值
        iframe.src = url;
    }
    // android 捕获了iframe的url之后, 也是中断 js 进程的, 所以这里可以用个 setTimeout 0 来删除 iframe
    setTimeout(function() {
        iframe.parentNode.removeChild(iframe);
    }, 0);
}