iOS端代码

初始化

1.首先用pod进第三方库WebViewJavascriptBridge

2.在初始化 webView 或者wkWebView的页面初始化WebViewJavascriptBridge

 //1.打开log日志
        WebViewJavascriptBridge.enableLogging()
        // 2.给webview建立JS与OjbC的沟通桥梁
        self.bridge = WebViewJavascriptBridge.init(self.wkWebView)
        // 设置代理，如果不需要实现，可以不设置
        self.bridge.setWebViewDelegate(self)

3.如果要监听js调用iOS方法

其中getUserIdFromObjC和getBlogNameFromSwift 都是和前端协商好的协议名称，前端用这个名称来调用iOS，iOS监听这个协议名称，从而实现js一对一调用iOS方法

在调用的时候还可以给前端反馈数据

        //这里是 前端调用iOS， iOS监听 协议名"getBlogNameFromSwift" 获取前端传回的数据，并且可以给前端反馈数据
        self.bridge.registerHandler("getBlogNameFromSwift") { (data, responseCallBack) in
            print("此处是前端给iOS的数据 \(data!)")
            self.showAlertWithMessage(message: "iOS被调用，前端给的值为\(data!)")
            if((responseCallBack) != nil)
            {
                //此处是iOS反馈给前端的数据，可以是任何值
                responseCallBack!(["我是 getBlogNameFromSwift": "我是反馈给前端的值"]);
            }
        }

4.如果 iOS调用前端js方法

        //这里是iOS端调用js，并且打印出来前端反馈给iOS的值
        self.bridge.callHandler("jsGetDataFromSwift", data: ["iOS call js":"我是传递给前端的值"],  responseCallback: { (responseData) in
            print(responseData)
        })

web端代码

初始化

<!doctype html>
<html>
<head>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <style type='text/css'>
    html { font-family:Helvetica; color:#222; }
    h1 { color:steelblue; font-size:24px; margin-top:24px; }
    button { margin:0 3px 10px; font-size:12px; }
    .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
  </style>
</head>

<body>
<h1>WebViewJavascriptBridge Demo</h1>

<script>
  /*这段代码是固定的，必须要放到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 */

    /*iOS调用js使用该方法监听协议名，接收iOS传过来的数据，且可以给iOS反馈数据*/
    bridge.registerHandler('jsGetDataFromSwift', function(data, responseCallback) {
      log("iOS call js ", data)
      responseCallback({'js反馈的数据':'123456'})
    })
    //按钮点击事件
    document.getElementById('blogId').onclick = function (e) {
      /* js 调用iOS使用，js 根据前后端协商好的调用名称  调用iOS的方法，携带参数*/
      bridge.callHandler('getBlogNameFromSwift', {'js to swift': '5555'}, function(response) {
        log('JS got response', response)
      })
    }
  })

</script>

<div id='buttons'></div> <div id='log'></div>

<div>
  <input type="button" value="getBlogNameFromObjC" id="blogId"/>
</div>
</body>
</html>

iOS swift 和 H5交互 --WebViewJavascriptBridge 方式

iOS swift 和 H5交互 --JavaScriptCore 方式

iOS swift 和 H5交互 --WKWebViewDelegate 方式

iOS swift 和 H5交互 --拦截Url 方式

iOS swift 和 H5交互 --MessageHandler 方式

来源：oschina

链接：https://my.oschina.net/u/2964974/blog/4492107

标签

javascript