Android webview與js交換JSON對(duì)象數(shù)據(jù)示例

2020-04-11 12:06:35

字體：大中小

供稿：網(wǎng)友

最近幾個(gè)項(xiàng)目的測(cè)試結(jié)果，Android無(wú)法主動(dòng)通過(guò)調(diào)用
webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')"); 這種方式將jsonobject類型的data傳給js，因?yàn)閖s那邊得到就是一個(gè)string的對(duì)象。

與此同時(shí)，js主動(dòng)調(diào)用android的對(duì)象方式，android也無(wú)法返回給js一個(gè)jsonobject，需要js做一下轉(zhuǎn)換，例如：

Android 代碼：

復(fù)制代碼代碼如下:

 
WebView mWebView = (WebView) this.findViewById(R.id.webview); 
WebSettings settings = mWebView.getSettings(); 
settings.setJavaScriptEnabled(true); 
settings.setPluginsEnabled(true); 
settings.setAllowFileAccess(true); 
settings.setCacheMode(WebSettings.LOAD_NO_CACHE); 
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);//不加上，會(huì)顯示白邊 
String url="file:///android_asset/t.html"; //js代碼卸載t.html里 
NavigationInstance navigation =new NavigationInstance(this); 
mWebView.addJavascriptInterface(navigation, "Navigation"); 

NavigationInstance里的代碼：

復(fù)制代碼代碼如下:

 
@Override 
public JSONObject GetManeuverInfo() { 
try{ 
JSONObject test=new JSONObject(); 
test.put("maomao", "value"); 
return test; 
//return new JSONObject(bean.ManeuverInfo); 
}catch(Exception e){ 
Log.e(TAG, "",e); 
} 
return null; 
} 

t.html里的代碼：

復(fù)制代碼代碼如下:

 
function testAPI(el){ 
console.log("---------testAPI---------"); 
eval("var obj = "+Navigation.GetManeuverInfo()); 
alert('typeof:'+typeof(obj)); 
alert('maomao:'+obj.maomao); 
alert('obj:'+obj); 
} 

如果直接寫成 Navigation.GetManeuverInfo.maomao是會(huì)提示undefined，因?yàn)閖s那邊只得到了一個(gè)string對(duì)象而已，它不知道m(xù)aomao是個(gè)key。

通過(guò)eval將其轉(zhuǎn)化成表達(dá)式就可以調(diào)用obj.maomao得到value。
在此ps一下ios，貌似人家支持webview很好，js可以直接獲取到j(luò)son對(duì)象.
默認(rèn)t.html加載會(huì)自動(dòng)執(zhí)行testAPI函數(shù)，結(jié)果如下：