[セットトップ]WebView JavascriptBridgeのソースコードの解読

WebView JavascriptBridgeは、JavascriptとiOS Nativeを接続するオープンソースフレームであり、githubアドレスは、UID Webviewでイベントに応答してNative方法を実行することができます.また、Native方法を使ってjavascriptメソッドを呼び出すこともできます.
まず、どのようにそれを使うかを見てください.cocococopodsまたは直接プロジェクトに引込後、頭ファイルWebView JavascriptBridge.hを導入します.それが提供する方法は比較的簡単で使いやすいです.Native端はまず初期化する方法です.

 - (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView handler:(WVJBHandler)handler;
 - (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler;
 - (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView webViewDelegate:(WVJB_WEBVIEW_DELEGATE_TYPE*)webViewDelegate handler:(WVJBHandler)handler resourceBundle:(NSBundle*)bundle;

webView:Nativeで初期化された

handler:リターンブロック、javascriptリターンデータ

を返します.

webView Delegate:私達のwebViewの代理オブジェクトは、webViewイベントの対象

を処理します.

bundle:WebView Javascript Bridge.js.textファイルがあるbundleは、webViewの回調で

を見つけることができます.
そして私たちは通過できます.

- (void)send:(id)message; - (void)send:(id)message responseCallback:(WVJBResponseCallback)responseCallback;

方法はjavascriptにデータを送信します.javascriptは実行するinitの時これらのデータを受け取ります.webViewの展示が必要なデータです.messageはカスタマイズできます.これらのデータはjavascriptの中で自分で解析して使用する必要があります.reponseCallbackはデータを受け取った後のコール方法です.
最後に通過します

- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;

いくつかの方法を登録して、handler Nameは約束した文字列のために、これらの登録の方法はjavascriptによって呼び出されたので、Nativeはhandlerの中で応答を受け取って処理します.
javascriptにメッセージを送ることもできます.

- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

これでNavtiveの配置ができました.javascriptの端にjavascriptを追加する方法が必要です.

function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener('WebViewJavascriptBridgeReady', function() {
                                  callback(WebViewJavascriptBridge)
                                  }, false)       
    }
}

変更方法はWebView JavascriptBridgeのオブジェクトを初期化して、一回だけ初期化してから、javascriptでこのオブジェクトの方法を使ってメッセージを送ることができます.

connectWebViewJavascriptBridge(function(bridge) {

    /* Init your app here */
//    bridge
    bridge.init(function(message, responseCallback) {
        alert('Received message: ' + message)   
        if (responseCallback) {
            responseCallback("Right back atcha")
        }
    })
//      Native
    bridge.send('Hello from the javascript')
    bridge.send('Please respond to this', function responseCallback(responseData) {
        console.log("Javascript got its response", responseData)
    })
})
//     ,   Native     
bridge.registerHandler('setFontEvent', function(data, responseCallback) {
            setFontSize(data)
         })

WebView JavascriptBridgeの内部はどうやって実現されますか?まずそのソースファイルは二つの部分から構成されています.WebView JavascriptBridge.hと.mの二つのiOS類、WebView Javascript Bridge.js.txt javascript類.WebView Javascript Bridge.mの中に3つの集合対象があります.

//   Native     
   NSMutableArray* _startupMessageQueue;
//   Native      
   NSMutableDictionary* _responseCallbacks;
//   Native javascript       
   NSMutableDictionary* _messageHandlers;

bridgeを初期化すると、bridgeはwebViewのエージェントを自分自身に登録し、Unibviewのいくつかのプロキシ方法を実現し、メッセージを処理するために使用されます.webViewがbridgeに登録すると、bridgeはメッセージ名をkeyとして、リターンブロックはvalueに保存されます.メッセージをwebViewからjavascriptに送信するとsend:またはcallHandler:などの方法が呼び出されます.内部はメッセージ辞書を構築し、辞書に送信されたdataを保存し、ブロック、メッセージIDと方法名を返すという構造です.そのうちIDは自己増ID objc_です.cb_1,2,3.しかも_を使うレスポンスCallbacksはIDとリプブロックを保存しています.構造のメッセージ辞書は_に加入します.startup Message Queでは、javascriptへの配信を待っています.
これらのメッセージはどのように配信されますか?bridgeはUID Webviewのプロキシ方法webViewDidFinishLoadでwebViewがロードされた後に呼び出す方法であり、巡回している.startup Message Queは、この中に配布されたメッセージ辞書が保存されています.各メッセージ辞書の呼び出し- (void)_dispatchMessage:(WVJBMessage*)messageを通じてメッセージを配信しています.中にはjavascript方法WebViewJavascriptBridge._dispatchMessageFromObjC(data)が実行されています.この方法はWebView JavascriptBridge.jxtで定義されています.
javascriptはどうやってNativeにメッセージを伝えますか?もちろんUICWebviewの代理方法によって伝えられます.

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

この方法はwebViewをロードする前に呼び出します.ロードするかどうか聞いてみます.これはuiwebviewの要求をキャプチャできます.したがって、bridgeはWebView Javascript Bridge.js.txtの中でjavascriptの方法の呼び出しを受けてHTMLのIFrameを設定しました.これはUICWebviewの方法を起動します.142bridgeはカスタムフォーマットでパラメータを解析し、_からレスポンスCallbacksに保存されているコールバックを取り出してフィードバックすると、javascriptとNativeの間の通信が完了します.