互動方式一：原生互動（以WKWebView為栗子）

1.原生呼叫H5方法

[wkWebView evaluateJavaScript:@"js方法名" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    if (!error) { // 成功
       NSLog(@"%@",response);
    } else { // 失敗
        NSLog(@"%@",error.localizedDescription);
    }
}];

H5呼叫原生方法

1
 
> App端：
  // 1. WKWebView注入ScriptMessageHandler
 [wkWebView.configuration.userContentController addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:@"xxx"];
  // 2. 提供setWebViewAppearance方法，這樣就能反射出H5即將傳來的字串@"setWebViewAppearance"
  - (void)setWebViewAppearance {
  
  }
 

  
2> H5端：
  // 1. 獲取handler
  var handler = { 
    callHander: function (json) {
    if (iOS端) {
        window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json))
    }
    if (安卓端) {
        window.xxx.postMessage(JSON.stringify(json));
    }
  }
  // 2. 設定呼叫App方法所需要的傳出的引數（這裡是json格式）
  function
 
 setAppAppearance(){
    handler.callHander({
        'body':"setWebViewAppearance",
        'buttons': [
            {
                "text":"分享",
                "action":""
            }
        ],
        'title':"這是webView的標題"
    });
  } 
  // 3. H5呼叫自己的設定方法,繼而呼叫了原生客戶端的方法
  setAppAppearance()

注意：出現的xxx的位置要保持一致，這個字串是客戶端與H5約定好的，可以是任意字串，但最好易懂為宜。

互動方式二：藉助第三方庫WebViewJavascriptBridge互動

WebViewJavascriptBridge地址：
https://github.com/marcuswestin/WebViewJavascriptBridge

1.原生呼叫H5方法

1> App端：
// 1. 初始化
WKWebViewJavascriptBridge *bridge =  [WKWebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,   WVJBResponseCallback responseCallback) {
    
}];
// 2. App callHandler是呼叫H5提供方法，方法名為：getShareInfo
[bridge callHandler:@"getShareInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
    
}];

2> H5端：
// 1. 初始化
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)
}
// 2. H5 registerHandler是給App提供方法，方法名為：getShareInfo
[bridge registerHandler:@"getShareInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
}];

2.H5呼叫原生方法

1> App端：
// 1. 初始化
WKWebViewJavascriptBridge *bridge =  [WKWebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data,   WVJBResponseCallback responseCallback) {
    
}];
// 2. App registerHandler是給H5提供方法，方法名為：showShare
[bridge registerHandler:@"showShare" handler:^(id   data, WVJBResponseCallback responseCallback) {
  
}];

2> H5端：
// 1. 初始化
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)
}
// 2. H5 callHandler是呼叫App提供方法，方法名為：showShare
[bridge callHandler:@"showShare" handler:^(id data, WVJBResponseCallback responseCallback) {
    
}];

另附上WKWebView詳解的兩篇文章，寫的還是相當詳細的。

• WKWebView與JS互動實戰技巧之API介紹
  http://blog.csdn.net/baihuaxiu123/article/details/51286109
• IOS與HTML5互動方法總結
  http://blog.csdn.net/baihuaxiu123/article/details/51674726

第二種互動方法的詳盡文章
傳送門：https://www.cnblogs.com/chaoyuehedy/p/8583272.html

轉自：https://www.jianshu.com/p/cb25d94d814b