Hybird App 之 JSBridge

前言

公司业务的变迁，需要从 native 向 hybird 的开发方式转变。在前期的准备阶段，我发现了 JsBridge这一通讯协议（Scheme）。为了更好的使用这一工具，阅读源代码是不可或缺的。

示例项目

自JsBridge项目中某个旧版本中，Fork 的项目并重构部分的分支NR_JsBridge。虽然是从旧版本中 Fork 出的分支，但已经与JsBridge有过 Merge 操作，一些 Bug 修正也已经引入。

建议Run 下项目，体会NR_JsBridge所完成的事情。

git clone https://github.com/NickRobin/NR_-JSBridge.git

设计原理

JsBridge提供了 WebView 与 JS的通讯协议（约定）。
抛开源代码，来实现这个过程无非是：

• WebView主动调用 JS；（若存在回调，则由JS告知 WebView执行回调）。

  • WebView 调用 JS，WebView调用loadUrl()即可；
  • 示例：
    

    WebView.loadUrl(javascript:alert());

• JS 主动调用 WebView；（若存在回调，则由 WebView 告知 JS执行回调）。

  • WebView提供了方法shouldOverrideUrlLoading用于拦截重载 URL。

    
     public boolean shouldOverrideUrlLoading (WebView view, String url)

  • 如果监听shouldOverrideUrlLoading该方法，则会导致页面刷新。所以为了避免这个问题，使用JS生成了一个display=none的iframe，通过设置iframe.src来使shouldOverrideUrlLoading正常生效并且不影响界面。

    // JavaScript
    //...
    function _createQueueReadyIframe(doc) {
        messagingIframe = doc.createElement('iframe');
        messagingIframe.style.display = 'none';
        doc.documentElement.appendChild(messagingIframe);
    }
    // ...
    //  提供给native调用,该函数作用:获取sendMessageQueue返回给native,由于android不能直接获取返回的内容,所以使用url shouldOverrideUrlLoading 的方式返回内容
    function _fetchQueue() {
        var messageQueueString = JSON.stringify(sendMessageQueue);
        sendMessageQueue = [];
        if (isIphone()) {
                return messageQueueString;
    
        } else if (isAndroid()) {
            /*android can't read directly the return data, so we can reload iframe src to communicate with java*/
            messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
        }
    }
    

项目实践

实现方式

将所有属性和方法封入 window.iPudong 或 iPudong 这个全局对象，区分大小写。

安全提示

另外出于安全因素，请务必判定仅针对可识别的内部网址（如：以http://www.domain.com/ 开头的）再发送 Authorization 头和支持iPudong对象，避免跨站问题。

实现细节

Android 的示例程序：https://github.com/NickRobin/NR_-JSBridge。

//App 端在成功注入 iPudongJSBridge 之后，需要主动发送数据：{version: 'iPudong/2.3.0'}；
bridge.init(function (message, responseCallback) {
            log('JS got a message', message);
            var data = {'Javascript Responds': 'Wee!'};
            log('JS responding with', data);
            responseCallback(data);
        });

常用方法定义

方法	主叫方	方法描述
getShareParameters()	WebView	获取当前网页可供分享的参数；
close()	JS	关闭当前页面；
popBack()	JS	返回上一个页面；
resFinder()	JS	资源查找者，用处上传图片、文本或其他文件。；
showToast()	JS	短暂信息提示；
showDialog(type,content,callback)	JS	显示对话框；
其他若需要在自行定义吧	。。。	。。。

---

结束语，如果文章有显著错误还请看官指正
chenjunqi.china@foxmail.com