iOS OC與JS的互動(WebViewJavascriptBridge實現)

阿新 • • 發佈：2019-01-21

在開發的過程中，我們會遇到原生app與web的互動，除了用WebView載入HTML5檔案顯示外，還可能需要和WebView進行互動，例如點選WebView上面的按鈕呼叫原生OC的函式方法，上一章總結了JavaScriptCore的用法，這一章我們來學習另一種方法WebViewJavascriptBridge這個開源專案。

WebViewJavascriptBridge是一個輕量的用於OC與JS互動的第三方庫。WebViewJavascriptBridge是支援到iOS6之前的版本的，用於支援Native的iOS與JavaScript互動。如果需要支援到iOS6之前的app，使用它是很不錯的。本篇講講WebViewJavascriptBridge的基本原理及詳細講講如何去使用，包括iOS端的使用和JS端的使用。

基本原理

WebViewJavascriptBridge的本質也是通過Webview代理攔截

程式碼：

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType   {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isBridgeLoadedURL:url]) {
    [_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {
    NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
    [_base flushMessageQueue:messageQueueString];
} else {
    [_base logUnkownMessage:url];
}
return NO;
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}

程式碼解釋:

通過webView代理攔截後，首先通過isBridgeLoadedURL方法判斷是否是bridge即需要橋接的URL，如果是，則通過injectJavascriptFile方法注入JS;否則判斷URL是否是佇列訊息，如果是，那麼執行查詢命令JS並重新整理佇列訊息；否則URL被識別為未知的訊息。

使用步驟

使用它可以用CocoaPods匯入：
pod ‘WebViewJavascriptBridge’, ‘~> 5.0.5’

引入WebViewJavascriptBridge

// 開啟日誌
[WebViewJavascriptBridge enableLogging];
// 給webview建立JS與OjbC的溝通橋樑
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridge setWebViewDelegate:self];

JS呼叫OC

本章節demo的HTML程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 來自html中的jsCallOC標題</title>
<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>
<h2>WebViewJavascriptBridge</h2>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}

/*這段程式碼是固定的，必須要放到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給ObjC提供公開的API，ObjC端通過註冊，就可以在JS端呼叫此API時，得到回撥。ObjC端可以在處理完成後，反饋給JS，這樣寫就是在載入頁面完成時就先呼叫*/
  document.getElementById('callmeId').onclick = function (e) {
  log('JS端 call OC端: callme')
  bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
     log('JS端 得到 response', response)
  })
}

document.getElementById('callAlertId').onclick = function (e) {
  log('JS端 call OC端: callAlert')
  bridge.callHandler('callAlert', {'title': '來自JS的message'}, function(response) {
     log('JS端 得到 response', response)
  })
}

/*JS給ObjC提供公開的API，在ObjC端可以手動呼叫JS的這個API。接收ObjC傳過來的引數，且可以回撥ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {

  log("Get user information from ObjC: ", data)
  //JS反饋給OC
  responseCallback({'result': factorial(data)})
})

/*我們在這注冊一個js呼叫OC的方法，不帶引數，且不用ObjC端反饋結果給JS*/
bridge.registerHandler('openWebviewBridge', function() {
  log("openWebviewBridge was called with by ObjC")
})

var factorial = function(n) { 
    if (n < 0)            
    return;               
    if (n === 0)      
    return 1;              
    return n * factorial(n - 1)

};                     
})

</script>

<div id='buttons'></div> <div id='log'></div>
<div>
<input type="button" value="JS呼叫OC傳值"  id="callmeId"/>
</div>
<div>
<input type="button" value="呼叫原生Alert" id="callAlertId">
</div>
</body>
</html>

1.JS呼叫原生callme方法，首先需要在OC端註冊此方法。如果JS端需要返回值的話我們可以通過responseCallback將返回值傳過去。

[self.bridge registerHandler:@"callme" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"執行任務了, data from js is %@", data);
if (responseCallback) {
    //OC反饋給JS
    responseCallback(@"這是OC給JS的反饋哦~");
}
}];

2.同時JS端呼叫OC方法，通過bridge.callHandler來呼叫：

bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
     log('JS端 得到 response', response)
  })

這樣雙方建立了通道，實現了JS呼叫OC原生方法。

引數說明：callme是OC端註冊的方法，在OC端註冊後，JS可以通過這個方法名與OC互動。比如點選JS呼叫OC傳值這個按鈕時，就會執行callHandle方法，JS端將引數傳給了iOS端，當iOS端收到引數時，通過responseCallback回撥反饋給JS端，JS端收到返回值。

效果圖如下：

這裡寫圖片描述

列印日誌

這裡寫圖片描述

列印日誌

這裡寫圖片描述

OC呼叫JS

1.OC呼叫JS端factorial函式，首先在JS端註冊factorial方法

/*JS給ObjC提供公開的API，在ObjC端可以手動呼叫JS的這個API。接收ObjC傳過來的引數，且可以回撥ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {     
  log("Get user information from ObjC: ", data)
  //JS反饋給OC
  responseCallback({'result': factorial(data)})
})

2.同時OC呼叫JS方法,通過[self.bridge callHandler:@”factorial” data:responseCallback:^(id responseData) {}]呼叫：

// OC呼叫JS方法
//OC給JS提供公開的API，JS端通過註冊，就可以在OC端呼叫此API並傳入引數時，得到回撥。
NSLog(@"OC端 call JS端");
[self.bridge callHandler:@"factorial" data:   [NSNumber numberWithInteger:[textField.text integerValue]] responseCallback:^(id responseData) {
resultL.text = [NSString stringWithFormat:@"結果%@",    [responseData objectForKey:@"result"]];
NSLog(@"OC端得到回撥responseData: %@",responseData);
}];

通過以上程式碼實現了OC呼叫JS。

效果圖如下：

這裡寫圖片描述

列印日誌

這裡寫圖片描述

接下來是OC呼叫JS方法（無參）

JS端註冊

/*我們在這注冊一個js呼叫OC的方法，不帶引數，且不用ObjC端反饋結果給JS*/
bridge.registerHandler('openWebviewBridge', function() {
  log("openWebviewBridge was called with by ObjC")
})

OC端呼叫

//OC給JS提供公開的API，JS端通過註冊，就可以在OC端呼叫此API，沒有引數傳入和回撥。
[self.bridge callHandler:@"openWebviewBridge" data:nil];
NSLog(@"OC端 call JS端: openWebviewBridge");

Demo下載
喜歡的親們隨手給個星星

總結

在寫這個demo的過程中遇到不少問題，尤其是JS端，需要注意的是JS端一定要寫log，否則沒有回撥。總的來說相對於JavaScriptCore更復雜一點，缺點就是要固定的加入相關程式碼，JS端程式碼要在固定的函式內新增，本文只是簡單的介紹了互動的基本原理和幾個常用的方法，僅供交流學習，如果有理解錯誤的地方還請大家多多指教。

iOS OC與JS的互動(WebViewJavascriptBridge實現)

基本原理

JS呼叫OC

OC呼叫JS

OC端呼叫

總結

iOS OC與JS的互動(WebViewJavascriptBridge實現)

使用WebViewJavascriptBridge實現OC與JS互動

iOS 開發 Object-C和JavaScript互動詳解之OC與JS互動在WKWebView中使用

OC與JS互動初體會

OC與JS互動之JavaScriptCore

OC與JS互動

OC 與 JS 互動遇到的坑

OC與JS互動 -- 原生

IOS中使用JavaScriptCore 實現OC與JS的互動

iOS OC與H5網頁互動之OC傳值給JS（WKWebView）

IOS應用通過UIWEBVIEW實現與JS互動

iOS中原生APP與JS互動之 WebViewJavascriptBridge 的簡單用法

ios開發app與js互動第三方工具WebViewJavascriptBridge的使用以及問題pod出現的問題處理

iOS與JS互動，OC呼叫JS方法，JS呼叫OC方法，URL解碼

iOS 開發中OC 與 JS的互動

iOS與JS互動的4種方法

Swift WKWebView(二)：iOS與js互動

目前iOS與JS互動的方法選擇比對

Swift 使用WKWebView 實現Swift 與JS 互動

iOS常用方法——WKWebView與h5互動的實現

iOS OC與JS的互動(WebViewJavascriptBridge實現)

基本原理

JS呼叫OC

OC呼叫JS

OC端呼叫

總結

相關推薦