iOSWebViewJavascriptBridge初步尝试与图文详细讲解

iOS WebViewJavascriptBridge初步尝试与图文详细讲解 - 那一抹风情 - 博客园

iOS端如何使用

• 第一步：开启日志
• // 开启日志，方便调试
• [WebViewJavascriptBridge enableLogging];
• 第二步：给ObjC与JS建立桥梁
• // 给哪个webview建立JS与OjbC的沟通桥梁
• self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
• // 设置代理，如果不需要实现，可以不设置
• [ self . bridge  setWebViewDelegate :self ] ;
• 第三步：注册HandleName，用于给JS端调用iOS端
• // JS主动调用OjbC的方法
• // 这是JS会调用getUserIdFromObjC方法，这是OC注册给JS调用的
• // JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传
• // OC端通过responseCallback回调JS端，JS就可以得到所需要的数据
• [ self . bridge  registerHandler : @"getUserIdFromObjC"  handler : ^ ( id  data ,  WVJBResponseCallback  responseCallback )  {
•      NSLog ( @"js call getUserIdFromObjC, data from js is %@" ,  data ) ;
•      if  ( responseCallback )  {
•        // 反馈给JS
•        responseCallback ( @ { @"userId" :  @"123456" } ) ;
•      }
• 第四步： OC 直接调用JS端注册的HandleName
• [self.bridge callHandler:@"getUserInfos" data:@{@"name": @"标哥"} responseCallback:^(id responseData) {
•      NSLog ( @"from js: %@" ,  responseData ) ;
• } ] ;
• js代码截取片段
• 解释：这段代码是必须的，申明交互直接拷贝即可，处理交互部分，需要改动，关键就是和oc端协商的方法名，以及js内部需要的处理逻辑。
• <!-- 申明交互 -->

      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  =  ' https://__bridge_loaded__ ' ;

          document.documentElement.appendChild(WVJBIframe);

          setTimeout(function() { document.documentElement.removeChild(WVJBIframe) },  0 )

      }

       <!-- 处理交互  方法名要和ios内定义的对应-->

      setupWebViewJavascriptBridge(function(bridge) {

           <!--处理 oc 调用 js -->

          bridge.registerHandler( ' registerAction ' , function(data, responseCallback) {

               // 处理oc给的传参

              alert( ' oc请求js  传值参数是： ' + data)                               

               var  responseData = {  ' result ' : ' handle success '  }

               // 处理完，回调传值给oc

              responseCallback(responseData)

          })

           var  callbackButton = document.getElementById( ' buttons ' ).appendChild(document.createElement( ' button ' ))

          callbackButton.innerHTML  =  ' 点击我，我会调用oc的方法 '

          callbackButton.onclick  =  function(e) {

              e.preventDefault()                                 

               <!--处理 js 调用 oc -->

              bridge.callHandler( ' loginAction ' , { ' userId ' : ' zhangsan ' , ' name ' :  ' 章三 ' }, function(response) {

                    // 处理oc过来的回调

                   alert( ' 收到oc过来的回调: ' + response)

              })

          }

      })

使用案例和截图： 

 

WKWebView：window.webkit.messageHandlers.openBrowserWithLoan.postMessage(['https://www.baidu.com';]);