WebViewJavascriptBridge实现iOS OC和js的交互

WebViewJavaScriptBridge 用于 WKWebView & UIWebView 中 OC 和 JS 交互。

它的基本原理是：
把 OC 的方法注册到桥梁中，让 JS 去调用。
把 JS 的方法注册在桥梁中，让 OC 去调用。

本质上，它也是通过webview的代理拦截scheme，然后注入相应的JS。

WebViewJavaScriptBridge 使用的基本步骤

首先第一步：

1 .导入WebViewJavascriptBridge框架

cocoapods导入：
pod 'WebViewJavascriptBridge'

WebViewJavascriptBridge git传中门

2 .导入头文件

#import <WebViewJavascriptBridge.h>

3 .具体代码实现

OC 代码

WebView的使用这里就不讲了，直接讲述WebViewJavascriptBridge的使用

第一步： 开启日志，方便调试

[WebViewJavascriptBridge enableLogging];
 

第二步： 给webview建立JS与OC的沟通桥梁

_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
[_bridge setWebViewDelegate:self];

第三步：注册HandleName，用于给JS端调用OC端

/*
 OC注册方法供 js 调用
 data ：是 js 调用 OC 方法时传给 OC 端 的参数
 OC 端将需要返回给 js的东西通过responseCallback传给 js
*/

[_bridge registerHandler:@"getStoryTitle" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSString *storyTitleStr = @"";
        if (self.model.timeline_event_title != nil) {
            storyTitleStr = self.model.timeline_event_title;
        }
        responseCallback(storyTitleStr);
 }];

第四步：OC端调用JS的方法

/*
 OC调用 js 方法
 data ：是   OC 调用js方法时传给 js端 的参数
*/

[self.bridge callHandler:@"setSeletPhotoData" data:hash responseCallback:^(id responseData) {
           YTLog(@"setSeletPhotoData 完成");
 }];

js 代码

第一步：这段代码是固定的，必须要放到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) {
  ...
})
          

setupWebViewJavascriptBridge(function(bridge)中 具体的实现：

注册js方法供oc调用

注册一个供oc调用的js的方法，不带参数，且不用OC端反馈结果给JS

   bridge.registerHandler('openWebviewBridgeArticle', function() {
   })

注册一个供oc调用的js的方法，带参数，且需要OC端反馈结果给JS

   bridge.registerHandler('getUserInfos', function(data, responseCallback) {
     //将数据回调给OC端
     responseCallback({'userId': '123456', 'blog': '然然的博客'})
   })

js调用OC的方法

  js调用OC的方法获取数据
   response ： 是OC回传给 js的东西

 bridge.callHandler('getData',null, function(response) {
         log('JS got response', response)
 })

⚠️⚠️ 注意：

当由于某些特殊原因，需要在html 代码 里面和oc进行交互时，比如 在j s的一个第三方的插件里面需要oc进行交互时，那只需要在该html文件里面实现

setupWebViewJavascriptBridge(function(bridge) {
  ...
})

在该方法内部进行正常注册js方法或调用oc即可。
比如：

<script>
        
      var editor = window.pell.init({
        element: document.getElementById('editor'),
        defaultParagraphSeparator: 'p',
        onChange: function (html) {
        }
      })
      
      setupWebViewJavascriptBridge(function(bridge) {
        bridge.callHandler('getModel','', function(response) {
                var content = response;
               $(".pell-content").html(content);
        })
      })
</script