Android webView與js 互動以及jsbridge框架原始碼分析
阿新 • • 發佈：2019-01-04
1.簡單篇
如何實現簡單的android 呼叫js 與js呼叫android
讓webview做一下操作
private void init(Context context){
WebSettings setting =getSettings();
setting.setJavaScriptEnabled(true);//支援js
setWebViewClient(new WebClient(this));
setWebChromeClient(new WebChromeClient());
//新增js呼叫android的方法這是關鍵 前者是個物件，後者是個字串 在js中是在window.android可以直接獲取到 注意這裡的toastMessage 是JavaScriptinterface 中被@JavascriptInterface註解的toastMessage方法
這是js呼叫android中的方法
android 呼叫js 的方法
<script>
function jsalert(data) {
alert(data);
}
</script>
//java這樣呼叫即可 方法前需要加javascript
webview.loadUrl('javascript:jsalert('111')')注意點
- 需要在主執行緒呼叫才會生效
- 如果在oncreate中直接呼叫loadurl不會生效原因是 webview需要載入完成才能呼叫webview載入完成的回撥函式是在webclinet 中
- 如果alert沒效果，需要在setWebChromeClient(new WebChromeClient());
String javascriptCommand='javascript:jsalert('111')';
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}else{
((Activity) getContext()).runOnUiThread(new Runnable() {
@Override
public void run() {
//此時已在主執行緒中，可以更新UI了
loadUrl(javascriptCommand);
}
});
}
}
public class JsWebClient extends WebViewClient {
public static final String TAG="JsWebClient";
private JsWebView jsWebView;
public JsWebClient(JsWebView jsWebView) {
this.jsWebView = jsWebView;
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.e(TAG,url);
return super.shouldOverrideUrlLoading(view,url);
}
//當這個回撥函式觸發了webview才可以傳送訊息
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
}
簡單封裝
js與android中的通訊還是通過字串來處理的
//傳遞過來
基本的資料格式大致為
{
type:type,//型別
funName:funName,//當js調android 讓android是否有回撥方法到js中的某個方法
option:option，//object，內部帶個個引數
}
//回覆js
{
type:'success'/'fail'...
data:data
}
@JavascriptInterface
public void postMessage(String data) {
try {
JSONObject jsonObject = new JSONObject(data);
String type = jsonObject.getString("type");
JSONObject option=jsonObject.getJSONObject("option");
String funName=jsonObject.getString('funName');
switch(type){
case 'abc':
break;
case 'bcd':
Object obj=....
....
dispathMessage(funName,obj,'success')
break;
}
} catch (JSONException e) {
e.printStackTrace();
if(!TextUtils.isEmpt(type)){
dispathMessage(funName,null,'fail')
}
}
}
//真正傳送給js 的方法 loadurl是非同步載入所以如果在web為載入完成傳送無效果
public void dispathMessage(String funName,Object obj,String type){
if(TextUtils.isEmpt(type))return;
JSONObject jsonObject = new JSONObject();
try {
if(obj!=null)
jsonObject.put("data",new Gson().toJson(obj));
jsonObject.put("type",type);
} catch (JSONException e) {
e.printStackTrace();
}
final String javascriptCommand=String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, funName,jsonObject.toString());
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}else{
((Activity) getContext()).runOnUiThread(new Runnable() {
@Override
public void run() {
//此時已在主執行緒中，可以更新UI了
loadUrl(javascriptCommand);
}
});
}
}
public class BridgeUtil {
final static String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:%s('%s')";
}
js的封裝還沒做但是大體是如上
JsBridge框架分析
接下來看下github上的一個JsBridge這個框架 start約3000+的 他的實現比較完整
這是他的具體實現 程式碼不多 其中assets中的js檔案是為了注入他的封裝的js程式碼 他的互動方式與上面不同具體實現
這是他封裝的webview
public class BridgeWebView extends WebView implements WebViewJavascriptBridge {
private final String TAG = "BridgeWebView";
//載入自己的js檔案 ，然後別人的html呼叫它的js來傳遞訊息
public static final String toLoadJs = "WebViewJavascriptBridge.js";
//callId為鍵，記錄回撥的集合
Map<String, CallBackFunction> responseCallbacks = new HashMap<String, CallBackFunction>();
//本地註冊一個方法名讓js呼叫
Map<String, BridgeHandler> messageHandlers = new HashMap<String, BridgeHandler>();
BridgeHandler defaultHandler = new DefaultHandler();
//傳送訊息的物件，因為webview載入要時間所有他這裡先用隊裡儲存
private List<Message> startupMessage = new ArrayList<Message>();
public List<Message> getStartupMessage() {
return startupMessage;
}
//傳送訊息
private void queueMessage(Message m) {
//這邊只有只為null的時候才會進入傳送訊息，置為null是在BridgeWebViewClient的onPageFinished中
if (startupMessage != null) {
startupMessage.add(m);
} else {
dispatchMessage(m);
}
}
public class BridgeWebViewClient extends WebViewClient {
private BridgeWebView webView;
public BridgeWebViewClient(BridgeWebView webView) {
this.webView = webView;
}
//這就是他處理互動的另一個方式
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
try {
url = URLDecoder.decode(url, "UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回資料
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
webView.flushMessageQueue();
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
//這裡是是webview載入完成做到的操作
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (BridgeWebView.toLoadJs != null) {
//在當前webview中載入一段自己的js檔案
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
}
//
if (webView.getStartupMessage() != null) {
for (Message m : webView.getStartupMessage()) {
webView.dispatchMessage(m);
}
//這個裡webview載入完成將佇列之為null 之後就會走dispatchMessage這個方法
webView.setStartupMessage(null);
}
}
@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
}
}我們觀察的他的封裝物件和互動方式
public class Message {
//每個message都有一個callbackid 傳遞給js ，js吧這個返回給客戶端然後客戶端在responseCallbacks中查詢返回id的方法
private String callbackId; //callbackId
//回覆id
private String responseId; //responseId
private String responseData; //responseData
private String data; //data of message
private String handlerName; //name of handler
}
BridgeUtil 物件封裝了js與android之間的資料傳遞格式根據format 處理後做相應的操作他的互動方式放在了BridgeWebViewClient的shouldOverrideUrlLoading 這個方法
shouldOverrideUrlLoading是當網頁的超連結相應是回撥到WebClinet的shouldOverrideUrlLoading方法中return true本地處理
false是調整相應的連結
然後我們看他的js程式碼
我們直接看他傳送訊息的程式碼
//sendMessage add message, 觸發native處理 sendMessage
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
//這就是message佇列 佇列的原因後面會將
sendMessageQueue.push(message);
//這個messagingIframe.src 設定這一串東西
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
//messagingIframe 是iframe元素 新增到element中設定為不可見 然後在傳送資料中設定src
function _createQueueReadyIframe(doc) {
messagingIframe = doc.createElement('iframe');
messagingIframe.style.display = 'none';
doc.documentElement.appendChild(messagingIframe);
}
//在iframe的src屬性設定url webviewclient中的對url進行攔截做處理
public boolean shouldOverrideUrlLoading(WebView view, String url) {
try {
url = URLDecoder.decode(url, "UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回資料
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
webView.flushMessageQueue();
return true;
} else {
return super.shouldOverrideUrlLoading(view, url);
}
}_doSent傳送的方法裡面的src的內容最終會進入 webView.flushMessageQueue(); 因為字串匹配的原因
//這裡的_fetchQueue就是js中的_fetchQueue方法 實際呼叫了那個方法
final static String JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();";
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// deserializeMessage
//js傳送過來的資料分離出來相應的去處理
List<Message> list = null;
try {
list = Message.toArrayList(data);
} catch (Exception e) {
e.printStackTrace();
return;
}
if (list == null || list.size() == 0) {
return;
}
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
// 是否是response
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
CallBackFunction responseFunction = null;
// if had callbackId
final String callbackId = m.getCallbackId();
if (!TextUtils.isEmpty(callbackId)) {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
} else {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
// do nothing
}
};
}
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
}
}
}
});
}
}
function _fetchQueue() {
//將之前的message都序列出來一次傳送到客戶端
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
//android can't read directly the return data, so we can reload iframe src to communicate with java
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}
//將callback放到responseCallbacks
public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
this.loadUrl(jsUrl);
responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}檢視js中
//提供給native呼叫,receiveMessageQueue 在會在頁面載入完後賦值為null,所以
function _handleMessageFromNative(messageJSON) {
console.log(messageJSON);
if (receiveMessageQueue && receiveMessageQueue.length > 0) {
receiveMessageQueue.push(messageJSON);
} else {
_dispatchMessageFromNative(messageJSON);
}
}
/提供給native使用,
function _dispatchMessageFromNative(messageJSON) {
setTimeout(function() {
//解析message
var message = JSON.parse(messageJSON);
var responseCallback;
//java call finished, now need to call js callback function
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
//直接傳送
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
}
var handler = WebViewJavascriptBridge._messageHandler;
if (message.handlerName) {
//根據message中方法名去messageHandlers中去找，messageHandlers是js中註冊了的function集合
handler = messageHandlers[message.handlerName];
}
//查詢指定handler
try {
handler(message.data, responseCallback);
} catch (exception) {
if (typeof console != 'undefined') {
console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
}
}
}
});
}以上是jsbridge具體實現的思路
頁面載入成功會一次傳送receiveMes..中的給個任務然後，_dispatchMessageFromNative的方提供message中已經包含了足夠多的資訊，然後在判斷有沒有回撥id 呼叫回撥，把儲存在responseCallback中的方法移除，
如果沒有，檢視是否是註冊的方法，這裡客戶端的回撥資訊是存到sendMessageQueue佇列中，確實對於js來說是該傳送是資訊，所以sendMessageQueue佇列中，所有這裡他採用陣列的形式，存放的不知是js主動傳送的訊息，而且還儲存客戶端需要的回撥資訊內部容易讓人混亂的是Message中的callbackId responseId 對於誰是傳送者和接受者的轉換，對於傳送者需要回調的時候，
接受者將這個請求id設定為回撥id，反之一樣，兩個id的轉換在於傳送者和接受者的區別android 除錯js程式碼
之前程式碼中有一段
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
setWebContentsDebuggingEnabled(true);
}開啟後 在chrome瀏覽器中 輸入chrome://inspect 然後能找到當前應用有個insert按鈕
然後就可以開始搞事了