iOS與Html5和JS之間的互動---學習筆記四

標籤：

首先採用的架構是WebViewJavascriptBridge，採用這套架構可以方便的使iOS與JS互動

一. 流程圖（主要介紹思路）

 

二.iOS端如何使用

首先匯入#import "WebViewJavascriptBridge.h"檔案第一步：開啟日誌 // 開啟日誌，方便調試[WebViewJavascriptBridge enableLogging]; 第二步：給ObjC與JS建立橋樑 // 給哪個webview建立JS與OjbC的溝通橋樑self.bridge = [WebViewJavascriptBridgebridgeForWebView:webView]; // 設定代理，如果不需要實現，可以不設定[self.bridgesetWebViewDelegate:self]; 第三步：註冊HandleName，用於給JS端調用iOS端 // JS主動調用OjbC的方法// 這是JS會調用getUserIdFromObjC方法，這是OC註冊給JS調用的// JS需要回調，當然JS也可以傳參數過來。data就是JS所傳的參數，不一定需要傳// OC端通過responseCallback回調JS端，JS就可以得到所需要的資料[self.bridgeregisterHandler:@"getUserIdFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"js call getUserIdFromObjC, data from js is %@", data);    if (responseCallback) {      // 反饋給JS      responseCallback(@{@"userId": @"123456"});    }}];  [self.bridgeregisterHandler:@"getBlogNameFromObjC"handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);    if (responseCallback) {      // 反饋給JS      responseCallback(@{@"blogName": @"星仔"});    }}]; 第四步：直接調用JS端註冊的HandleName [self.bridgecallHandler:@"getUserInfos"data:@{@"name": @"ddsds"}responseCallback:^(id responseData) {    NSLog(@"from js: %@", responseData);}];

 

三.JS端如何使用

    <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調用OC的方法，不帶參數，且不用ObjC端反饋結果給JS：開啟本demo對應的博文*/     bridge.registerHandler(‘openWebviewBridgeArticle‘, function() {         log("openWebviewBridgeArticle was called with by ObjC")     })      /*JS給ObjC提供公開的API，在ObjC端可以手動調用JS的這個API。接收ObjC傳過來的參數，且可以回調ObjC*/-      bridge.registerHandler(‘token‘, function(data, responseCallback) {         log("G星爺: ", data)       responseCallback({這裡給我返回拼接後的地址})     })      /*JS給ObjC提供公開的API，ObjC端通過註冊，就可以在JS端調用此API時，得到回調。ObjC端可以在處理完成後，反饋給JS，這樣寫就是在載入頁面完成時就先調用*/       bridge.callHandler(‘getUserIdFromObjC‘, function(responseData) {        log("JS call ObjC‘s getUserIdFromObjC function, and js received response:", responseData)      })       document.getElementById(‘blogIds‘).onclick = function (e) {         log(‘js call objc: getBlogNameFromObjC‘)         bridge.callHandler(‘ww‘, {‘blogdURL‘: ‘weidsfdl‘}, function(response) {                          log(‘JS got response‘, response)                          })       }     })           </script>

四.注意事項

1.當出現這樣的提示的話，說明JS那邊已經實現了名字為‘ww’的方法，但是iOS這邊沒有註冊，

具體實現是：
[self.bridgeregisterHandler:@"ww"handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);    if (responseCallback) {      // 反饋給JS      responseCallback(@{@"blogName": @"星仔"});    }}];

五.防止WebView長按實現的方法如下：

- (void)webViewDidFinishLoad:(UIWebView *)webView{    // 禁用 頁面元素選擇    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect=‘none‘;"];    //     禁用 長按彈出ActionSheet    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout=‘none‘;"];}

 

iOS與Html5和JS之間的互動---學習筆記四