webview中java與js交互

WebView提供了在Android應用中展現網頁的強大功能。也是目前Hybird app的大力發展的基礎。做爲Android系統的一個很是重要的組件，它提供兩方面的強大的能力：對HTML的解析，佈局和繪製；對JavaScript的解釋和執行。Hybird App的組成是Native+H5，Native部分是java語言實現；而JavaScript是H5中必不可少的部分。所以就會遇到Java與JavaScript互相調用的狀況！這裏記錄了一個最基本的互相調用的例了！

 

1.Native佈局中添加WebView組件

1 <WebView
2         android:id="@+id/wv_contacts"
3         android:layout_below="@id/tv_title"
4         android:layout_width="match_parent"
5         android:layout_height="match_parent">
6 </WebView>

 

2.初始化WebView，設置容許使用JavaScript並載入頁面

1   private void initWebView() {
2         mWebView = (WebView) findViewById(R.id.wv_contacts);
3         WebSettings settings = mWebView.getSettings();
4         settings.setJavaScriptEnabled(true);
5         mWebView.loadUrl("file:///android_asset/constacts.html");
6     }

 

3.java調用javaScript(mWebView.loadUrl("javascript:method(param)");)
首先定義好JavaScript函數：

1 function showData(constactsData){
2             var html="";
3             var ullist = document.getElementById("contacts_list");
4             var constactsJsonData = eval(constactsData);
5             for(var i = 0; i < constactsJsonData.length; i++){
6                 html += "<li onclick=callPhone(\"" + constactsJsonData[i].number + "\")>" + constactsJsonData[i].name + "</li>";
7             }
8             ullist.innerHTML = html;
9         }

而後在java調用JavaScript，放在onPageFinished回調中調用是爲了保證，調用Js時，Js已所有加載完成

 1 mWebView.setWebViewClient(new WebViewClient() {
 2             @Override
 3             public boolean shouldOverrideUrlLoading(WebView view, String url) {
 4                 view.loadUrl(url);
 5                 return true;
 6             }
 7 
 8             @Override
 9             public void onPageFinished(WebView view, String url) {
10                 super.onPageFinished(view, url);
11                 showContactsInfo();
12             }
13         });
14 
15 private void showContactsInfo() {
16         String info = jsInterface.readContacts();
17         mWebView.loadUrl("javascript:showData(" + info + ")");
18     }

 

4.在Js中調用Java（mWebView.addJavascriptInterface(new JavaScriptInterface(), "interface");）。如代碼所示，在Js中調用Java Native方法。須要將須要調用的方法所屬對象轉化爲一個別名。將這個別名透傳到JavaScript中，而後在JavaScript中經過別名訪問Native方法。

首先添加別名

 1 mWebView.addJavascriptInterface(new JSInterface(this.getApplicationContext()), "jsinterface"); 
而後定義Native方法

1 public void callPhone(String number) {
2         Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + number));
3         intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
4         mContext.startActivity(intent);
5     }

最後經過別名在JavaScript中進行調用
 1 function callPhone(number){ 2 jsinterface.callPhone(number); 3 } 

 

若是便完成了Hybird App中的最基本的Java和JavaScript的通訊的功能！