H5原生交互中jsBridge文件引入后可交互

最新推荐文章于 2024-08-27 08:12:54 发布

前端技术负责人

最新推荐文章于 2024-08-27 08:12:54 发布

阅读量1.3k

点赞数 1

分类专栏： H5

本文链接：https://blog.csdn.net/weixin_43837268/article/details/111179573

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了在iOS和Android中如何使用WebViewJavascriptBridge进行JavaScript与原生代码的交互。在iOS中，通过设置iframe来触发加载并回调函数；在Android中，监听WebViewJavascriptBridgeReady事件来建立连接。同时，展示了初始化方法、注册回调函数以及调用和响应的示例代码。

摘要由CSDN通过智能技术生成

//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)
            })
        })
    }
}