Android Webview雖然提供了頁面加載及資源請求的鉤子,但是對于h5的ajax請求并沒有提供干涉的接口,這意味著我們不能在webview中干涉javascript發(fā)起的http請求,而有時候我們確實需要能夠截獲ajax請求并實現(xiàn)一些功能如:統(tǒng)一的網(wǎng)絡(luò)請求管理、cookie同步、證書校驗、訪問控制等。
思路
雖然在 Webview中無法直接攔截 ajax請求(其實在shouldInterceptRequest 中是可以收到ajax請求的,但是遺憾的是取不到請求參數(shù),這樣也是沒有意義的), 我們可以轉(zhuǎn)換思路,能不能在js中將所有的請求轉(zhuǎn)發(fā)到native中,這樣也就達(dá)到了相同的目的。如果可以,那就需要一種在javascript和native之間通信的橋梁(javascript bridge),通過它,javascript將請求信息傳遞給native, native完成真正的請求后再將結(jié)果數(shù)據(jù)傳遞給javascript。那么我們的思路就是:
在javascript中攔截所有ajax請求,然后通過javascript bridge將請求信息傳遞給native
native收到請求信息后,進(jìn)行一些與處理邏輯,然后完成本次請求,將請求結(jié)果通過javascript bridge再回傳給javascript.
這樣,在第二步native上收到請求信息后,我們就可以進(jìn)行統(tǒng)一的網(wǎng)絡(luò)請求管理、cookie同步、證書校驗、訪問控制。思路雖然簡單,但實現(xiàn)起來卻是比較麻煩,因為需要前端和native都需要做不少的工作。那么有什么簡單的方法嗎?當(dāng)然有!
輪子
fly.js 是一個支持請求重定向的輕量級、跨平臺的Javascript http請求庫 ,前端可以使用它輕松發(fā)起網(wǎng)絡(luò)請求,它會自動將請求轉(zhuǎn)發(fā)至native. 現(xiàn)在解決了第一個問題,接下來我們需要選一個javascript bridge, 而現(xiàn)在開源的javascript bridge挺多,你可以選擇任意一個你喜歡的。但是,在此強(qiáng)烈推薦一下 DSBridge 它是一個使用非常簡單并支持同步的跨平臺javascript birdge, 最關(guān)鍵的是, DSBridge 的demo中就有接收處理fly.js轉(zhuǎn)發(fā)的http請求的示例,并且給出了okhttp的實現(xiàn),并且,fly.js](https://github.com/wendux/fly) 官方也提供了DSBridge 的adapter. 下面我們以DSBridge為例,演示一下整個過程:
實例
前端
//引入dsbridge adaptervar adapter = require("flyio/dist/npm/adapter/dsbridge")var EngineWrapper = require("flyio/dist/npm/engine-wrapper")var dsEngine = EngineWrapper(adapter)var fly = new Fly(dsEngine);//接下來,通過fly發(fā)起的ajax請求都會轉(zhuǎn)發(fā)到native上fly.post('/user', { name: 'Doris', age: 24 phone:"18513222525" }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Native端
@JavascriptInterface public void onAjaxRequest(JSONObject jsonObject, final CompletionHandler handler){ //jsonObject 為fly adapter 傳給端的requerst對象 //端上完成請求后,將響應(yīng)對象通過hander返回給fly adapter //hanlder(response) }fly.js中dsbridge的adapter會調(diào)用Native的 onAjaxRequest方法,native只需實現(xiàn)這個方法即可,完整的請求實現(xiàn)可以參照 DSbridge demo中 AjaxHandler 的實現(xiàn).
新聞熱點(diǎn)
疑難解答
圖片精選