天天看點

H5原生互動中jsBridge檔案引入後可互動

//ios
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
  setupWebViewJavascriptBridge();
  
  //安卓注冊事件監聽
  function connectWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge)
      } else {
          document.addEventListener(
              'WebViewJavascriptBridgeReady'
              , function() {
                  callback(WebViewJavascriptBridge)
              },
              false
          );
      }
  }
//注冊回調函數,第一次連接配接時調用 初始化函數
 connectWebViewJavascriptBridge(function(bridge) {
       //初始化
      bridge.init(function(message, responseCallback) {
          //var data = {'Javascript Responds': 'Wee!'};
          responseCallback(data);
      });
      //Android調用js方法:functionInJs方法名稱需要保持一緻 ,并傳回給Android通知
      bridge.registerHandler("functionInJs", function(data, responseCallback) {
          responseCallback(data);
      });
  })



export default {
    //js調APP方法 (參數分别為:app提供的方法名  傳給app的資料  回調)
    callhandler: function (method, params, callback) {
        setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(method, params, callback)
        })
    },

    // APP調js方法 (參數分别為:js提供的方法名  回調)
    registerHandler(method, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.registerHandler(method, (data, responseCallback) => {
                callback(data, responseCallback)
            })
        })
    }
}
           
h5