WebViewJavascriptBridge 는 JS 와 OC 의 상호 호출 을 실현 합 니 다.

현재 많은 앱 들 이 원생 + H5 로 개발 되 었 는데 이런 혼합 개발 모델 은 JS 와 OC 의 상호 호출 이 필요 하 다. WebViewJavascriptBridge 는 바로 이 문 제 를 해결 하 는 데 쓰 인 다.그것 의 사용 도 매우 간단 하 다. 다음은 두 가지 상황 으로 나 누 어 내 가 어떻게 사용 하 는 지 보 여 준다.
준비 작업

JS 파일 이나 HTML 파일 의 script 태그 에 다음 코드 세 션 을 추가 하여 JS 와 OC 가 서로 호출 하 는 컨 텍스트 환경 을 설정 합 니 다. 여 기 는 HTML 의 script 태그 에 추 가 됩 니 다.lt;br> <code>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) }</code><br>

controller 의 m 에서 헤더 파일 WebView JavascriptBridge. h 를 가 져 오고 UIWebView 속성 과 WebView JavascriptBridge 의 구성원 변 수 를 추가 합 니 다bridge { WebViewJavascriptBridge *_bridge; } @property(nonatomic, strong)UIWebView *webView; 는 WebView JavascriptBridge 코드 를 다음 과 같이 초기 화 합 니 다 [WebViewJavascriptBridge enableLogging];// _bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { }];. 이로써 JS 와 OC 가 서로 호출 하 는 환경 을 설정 하고 그 다음 에 어떻게 호출 하 는 지 설정 합 니 다.

JS 호출 OC

먼저 viewdLoad 방법 에 JS 코드 에서 호출 해 야 할 함 수 를 등록 합 니 다. 코드 는 다음 과 같 습 니 다 [_bridge registerHandler:@"backAction" handler:^(id data, WVJBResponseCallback responseCallback) { //ToDo } html 에 단추 가 있 는 id 는 backicon 입 니 다. 단 추 를 눌 렀 을 때 OC 코드 $('#backicon').click(function() { setupWebViewJavascriptBridge(function(bridge) { bridge. callHandler ('backAction', function response Callback (response Data) {}) 를 호출 합 니 다.}}); $기 호 는 jQuery 를 나타 내 는데 여 기 는 약자 형식 입 니 다.

OC 호출 JS

우선 JS 파일 이나 HTML 파일 에 OC 에서 호출 할 함수 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) { log ('ObjC called testJavascriptHandler with', data) var response Data = {'Javascript Says':' Right back atcha! '} log (' JS responsing with ', responseData) responseCallback (responseData)} testJavascriptHandler JS ， OC [ bridge callHandler: @' testJavascriptHandler 'data: @ {@ @"foo":@"before ready" }];`

출력 로 그 를 쉽게 보기 위해 로그 방법 을 사 용 했 습 니 다. 이 방법 은 이렇게 정의 되 었 습 니 다 var uniqueId = 1 function log(message, data) { var log = document.getElementById('log') var el = document.createElement('div') el.className = 'logLine' el.innerHTML = uniqueId++ + '. ' + message + ':
' + JSON.stringify(data) if (log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) } }WebViewJavascriptBridge 에 대해 더 알 고 싶 으 신 분 들 은 아래 연결 을 클릭 하여 github 에 가서 WebViewJavascriptBridge 에 대해 자세히 알 아 보 세 요.