WebViewJavascriptBridge 使用小结(一)

2017-07-14  本文已影响361人  怎样m

一 :oc registerHandler 注册方法 js端直接调用 , js注册 方法OC代码直接调用

  // 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"});
    }
  }];
  
  [self.bridge registerHandler:@"getBlogNameFromObjC" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
    if (responseCallback) {
      // 反馈给JS
      responseCallback(@{@"blogName": @"技术博客"});
    }
  }];
[self.bridge callHandler:@"getUserInfos" data:@{@"name": @"标哥"} responseCallback:^(id responseData) {
    NSLog(@"from js: %@", responseData);
  }];
  /*这段代码是固定的,必须要放到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 = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
      }
    
      /*与OC交互的所有JS方法都要放在此处注册,才能调用通过JS调用OC或者让OC调用这里的JS*/
      setupWebViewJavascriptBridge(function(bridge) {
       var uniqueId = 1
       function log(message, data) {
         var log = document.getElementById('log')
         var el = document.createElement('div')
         el.className = 'logLine'
         el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
         if (log.children.length) {
            log.insertBefore(el, log.children[0])
         } else {
           log.appendChild(el)
         }
       }
       /* Initialize your app here */
       
       /*我们在这注册一个js调用OC的方法,不带参数,且不用ObjC端反馈结果给JS:打开本demo对应的博文*/
       bridge.registerHandler('openWebviewBridgeArticle', function() {
          log("openWebviewBridgeArticle was called with by ObjC")
       })
       /*JS给ObjC提供公开的API,在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数,且可以回调ObjC*/
       bridge.registerHandler('getUserInfos', function(data, responseCallback) {
         log("Get user information from ObjC: ", data)
         responseCallback({'userId': '123456', 'blog': '标哥的技术博客'})
       })

二 :bridge 可以使用js全局变量G_IOS_BRIDGE保存 前提得在调用bridge.init方法内给G_IOS_BRIDGE赋值

    <script>
    window.onerror = function(err) {
        log('window.onerror: ' + err)
    }
    
    var G_IOS_BRIDGE = null;
    try {
        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge);
            } else {
                document.addEventListener("WebViewJavascriptBridgeReady", function () {
                                          callback(WebViewJavascriptBridge)
                                          }, false)
            }
        }
        
        connectWebViewJavascriptBridge(function (bridge) {
                                       bridge.init(function (message, responseCallback) {
                                                   
                                                   alert('init初始化接受的' + message);
                                                   var data = {'Javascript Responds': 'Wee!1111'};
                                                   responseCallback(data);
                                                   });
                                       
                                       G_IOS_BRIDGE = bridge;
                                       
                                       });
    } catch (e) {
        
    }
    
  
  window.onload = function () {
    document.getElementById('blogId').onclick = function (e) {
       G_IOS_BRIDGE.callHandler('testObjcCallback', {'blogURL': 
  'http://www.henishuo.com'}, function(response) {
                       alert("2222" + response);
    })
}

  }

三:OC的bridge send方法 就会调用js的bridge.init()方法

    // oc 代码
    [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id responseData) {
        NSLog(@"objc got response! %@", responseData);
    }];

//OC bridge.send 方法过来的 就会调用到js这个方法
bridge.init(function(message, responseCallback) {
})


四:js的bridge send方法 就会调用OC的[WebViewJavascriptBridge bridgeForWebView:]初始化方法

//js代码
        connectWebViewJavascriptBridge(function (bridge) {
                                       bridge.init(function (message, responseCallback) {
                                                   
                                                   alert('init初始化接受的' + message);
                                                   var data = {'Javascript Responds': 'Wee!1111'};
                                                   responseCallback(data);
                                                   });
                                       bridge.send({ Foo:"Bar" }, function responseCallback(responseData) {
                                                   alert("js发送给OC的回应  " + responseData);
                                                   
                                            })

})

//OC代码
 _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"ObjC received message from JS: %@", data);
        responseCallback(@"Response for message from ObjC");
    }];


上一篇下一篇

猜你喜欢

热点阅读