WebViewJavascriptBridge.js代码学习

//notation: js file can only use this kind of comments
//since comments will cause error when use in webview.loadurl,
//comments will be remove by java use regexp
(function() {
  if (window.WebViewJavascriptBridge) {
    return;
  }

  var messagingIframe;
  var bizMessagingIframe;
  var sendMessageQueue = [];
  var receiveMessageQueue = [];
  var messageHandlers = {};

  var CUSTOM_PROTOCOL_SCHEME = 'yy';
  var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';

  var responseCallbacks = {};
  var uniqueId = 1;

  // 创建消息index队列iframe
  function _createQueueReadyIframe(doc) {
    messagingIframe = doc.createElement('iframe');
    messagingIframe.style.display = 'none';
    doc.documentElement.appendChild(messagingIframe);
  }
  //创建消息体队列iframe
  function _createQueueReadyIframe4biz(doc) {
    bizMessagingIframe = doc.createElement('iframe');
    bizMessagingIframe.style.display = 'none';
    doc.documentElement.appendChild(bizMessagingIframe);
  }
  //set default messageHandler  初始化默认的消息线程
  function init(messageHandler) {
    if (WebViewJavascriptBridge._messageHandler) {
      throw new Error('WebViewJavascriptBridge.init called twice');
    }
    WebViewJavascriptBridge._messageHandler = messageHandler;
    var receivedMessages = receiveMessageQueue;
    receiveMessageQueue = null;
    for (var i = 0; i < receivedMessages.length; i++) {
      _dispatchMessageFromNative(receivedMessages[i]);
    }
  }

  // 发送
  function send(data, responseCallback) {
    _doSend({
      data: data
    }, responseCallback);
  }

  // 注册线程 往数组里面添加值
  function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
  }
  // 调用线程
  function callHandler(handlerName, data, responseCallback) {
    _doSend({
      handlerName: handlerName,
      data: data
    }, responseCallback);
  }

  //sendMessage add message, 触发native处理 sendMessage
  function _doSend(message, responseCallback) {
    if (responseCallback) {
      var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
      responseCallbacks[callbackId] = responseCallback;
      message.callbackId = callbackId;
    }

    sendMessageQueue.push(message);
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
  }

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

  //提供给native使用,
  function _dispatchMessageFromNative(messageJSON) {
    setTimeout(function() {
      var message = JSON.parse(messageJSON);
      var responseCallback;
      //java call finished, now need to call js callback function
      if (message.responseId) {
        responseCallback = responseCallbacks[message.responseId];
        if (!responseCallback) {
          return;
        }
        responseCallback(message.responseData);
        delete responseCallbacks[message.responseId];
      } else {
        //直接发送
        if (message.callbackId) {
          var callbackResponseId = message.callbackId;
          responseCallback = function(responseData) {
            _doSend({
              responseId: callbackResponseId,
              responseData: responseData
            });
          };
        }

        var handler = WebViewJavascriptBridge._messageHandler;
        if (message.handlerName) {
          handler = messageHandlers[message.handlerName];
        }
        //查找指定handler
        try {
          handler(message.data, responseCallback);
        } catch (exception) {
          if (typeof console != 'undefined') {
            console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
          }
        }
      }
    });
  }

  //提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以
  function _handleMessageFromNative(messageJSON) {
    console.log(messageJSON);
    if (receiveMessageQueue) {
      receiveMessageQueue.push(messageJSON);
    }
    _dispatchMessageFromNative(messageJSON);

  }

  var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
    init: init,
    send: send,
    registerHandler: registerHandler,
    callHandler: callHandler,
    _fetchQueue: _fetchQueue,
    _handleMessageFromNative: _handleMessageFromNative
  };

  var doc = document;
  _createQueueReadyIframe(doc);
  _createQueueReadyIframe4biz(doc);
  var readyEvent = doc.createEvent('Events');
  readyEvent.initEvent('WebViewJavascriptBridgeReady');
  readyEvent.bridge = WebViewJavascriptBridge;
  doc.dispatchEvent(readyEvent);
})();

待过的某家公司中用于和原生交互的方案，当初这个文件也是从网上找的，拿来就用，没怎么细看。

最早我们的Hybrid应用只是h5调用原生的一些方法，所以只使用了native向页面注入一个webview的变量，并在这个变量上挂载一些方法，在安卓上存在一些问题（？安全漏洞）。后来改用bridge，安全性和兼容性比较好。bridge有一个小小的问题就是如果原生端不存在对应名称的方法，h5无法知道，所以h5需要做一套版本的判断，再进行方法的调用。

执行的操作

简单分析一下：这个文件包含了一个立即执行函数，代码加载后，做了几件事情：

1. 定义协议scheme，类似http，这里定义为yy
2. 创建消息index队列iframe，这个iframe后面可以看到是h5端使用的；创建消息体队列iframe，这个iframe可以看到是给原生端使用的。这两个iframe用于消息传递。
3. 创建WebViewJavaScriptBridge对象并挂载到window上
4. 创建Event对象，初始化事件名为WebViewJavaScriptBridgeReady的事件，并触发事件，表示bridge对象已准备好，可以使用了。

bridge对象

bridge对象有6个方法，分别为init、send、registerHandler、callHandler、_fetchQueue、_handleMessageFromNative，方法的作用大致可以见名知意。

• init方法，用于设置默认的消息处理函数，如果此时h5端的消息接收队列不为空，则调用_dispatchMessageFromNative来分发处理队列中的消息
• send方法，用于h5端发送消息，触发native去处理，调用_doSend将消息塞进h5端的消息发送队列，并将messagingIframe的src设置为发送的协议，触发iframe重新请求加载
• registerHandler方法：用于定义消息名称与消息回调函数的映射，保存在messageHandlers对象上，提供js函数给native调用，在原生完成操作后，将数据通过回调函数传递给h5
• callHandler方法：用于h5调用_doSend修改iframe src的方式将消息和数据传递原生
• _fetchQueue方法：提供给native使用的方法，将bizMessagingIframe的src设置为接收的协议，触发iframe重新请求，使原生获取到h5发送的消息
• _handleMessageFromNative方法：提供给native使用的方法，将消息塞进h5的消息接收队列，并进行消息分发

大致流程

1. H5调用Native

2. Native向H5传递

原理

H5调用Native的流程主要利用了iframe与原生端进行交互，通过修改iframe的src来触发原生端调用对应的操作，原生端监听到触发后，经过一系列操作后得到一个结果，再通过调用h5的回调函数，使h5可以处理原生返回的结果。

Native向h5传递有点类似h5的事件监听，h5注册一个名称用于标记操作，映射一个回调函数，原生端在用户做了某些操作后，获取到h5注册的操作对应的回调函数，并进行调用，将操作结果传递给h5。

参考

https://github.com/lzyzsd/JsBridge

luffyjet/WebViewJavaScriptBridge

marcuswestin/WebViewJavascriptBridge

https://blog.csdn.net/weixin_42130889/article/details/112208942

https://blog.csdn.net/sinat_33488770/article/details/120071214

Android与JS交互篇--JSBridge的使用