Android WebView載入本地html並實現Java與JS互動

標籤：

最近做的一個項目中，用到自訂地圖，將自訂地圖轉換成html頁面，現在需要做的是如何將本地的html載入到android中，並可以實現互動。

相關講解：

其實webview載入資源的速度並不慢,但是如果資源多了,當然就很慢。圖片、css 、js 、html這些資源每個大概需要10-200ms ,一般都是30ms就ok了。不過webview是必須等到全部資源都完成載入,才會進行渲染的,所以載入的速度很重要!從Google上我們瞭解到,webview載入頁面的順序是:先載入html,然後從裡面解析出css、js檔案和頁面上的圖片資源進行載入。如果webkit的緩衝裡面有,就不載入。載入完這些資源之後,就進行css的渲染和js的執行。CSS的渲染一般不需要很長時間,幾十毫秒就ok。關鍵是js的執行,如果用了jQuery,則執行起來需要5-6秒。而在這段時間,如果不在webview裡設定背景,網頁部分是白色的,很難看。這是一個很糟糕的使用者體驗。所以建議如果用網頁布局程式,最好別用那些龐大的js架構。最好使用原生的js寫業務指令碼,以提升載入速度,改善使用者體驗。

在Android上怎樣實現JAVA和JS互動呢？

Android的webview是基於webkit核心的,webview中整合了js與java互調的介面函數,通過addJavas criptInterface方法,可以將Java的類註冊進webkit,給網頁上的js進行調用,而且還可以通過loadUrl方法給webkit傳遞一個URL,供瀏覽器來進行解析,實現Java和js互動。

要想運行網頁上的js指令碼,webview必須設定支援Javas cript。

Java代碼：1mWebview.getSettings().setJavascriptEnabled(true);

然後是設定webView要載入的網頁：

　　web的網頁：webView.loadUrl("http://www.google.com");

　　本地的網頁:webView.loadUrl("file:///android_asset/XX.html"); //本地的存放在:assets檔案夾中

webview做完基本的初始化後我們還要要給它,加進一個回調的代理類JavascriptInterface,並給它一個調用的名稱:ncp

Java代碼：1mWebView.addJavas criptInterface(new Javas criptInterface(),"ncp");

Javas criptInterface可以是一個普通的Java類,類實現的方法,均可被js回調:

Java代碼：

final class Javas criptInterface {

　　public int callOnJs() {

　　　　return 1000;

　　}

　　public void callOnJs2(String mode) {

　　　　//TODO

　　}

}

Java要調用js的方法,只需知道js的方法名稱即可:

　　Java代碼：1mWebView.loadUrl("javas cript:onSaveCallback()");

js 這邊就更簡單:

　　JS代碼：　　

window.onload = function(){

　　document.getElementById(‘btn_1‘).addEventListener(‘click‘, onBtnClick, false);

　　var _int_value = window.ncp.callOnJs();

　　alert("get int from java:" + _int_value );

}

function onBtnClick() {

　　window.ncp.callOnJs2("click");

}

Java和js互動有以下一些特點:

1.Java 調用 js 裡面的函數,速度並不令人滿意,大概一次一兩百毫秒吧,如果要做互動性很強的事情,這種速度會讓人瘋掉的。而反過來就不一樣了, js 去調 java 的方法,速度很快,基本上 40-50 毫秒一次。所以盡量用 js 調用 java 方法,而不是 java 去調用 js 函數。

2.Java 調用 js 的函數,沒有傳回值,而 Js 調用 java 方法,可以有傳回值。傳回值可以是基本類型、字串,也可以是對象。如果是字串,有個很討厭的問題,第 3 點我會講的。如果是對象,這個對象會被轉換為 js 的對象,直接可以訪問裡面的方法。但是我不推薦 java 返回給 js 的是對象,除非是必須。因為 js 收到 java 返回的對象,會產生一些交換對象,而如果這些對象的數量增加到了 500 或 600 以上,程式就會出問題。所以盡量返回基礎資料型別 (Elementary Data Type)或者字串。

3.Js 調用 Java 的方法,傳回值如果是字串,你會發現這個字串是 native 的,不能對它進行一些修改操作,比如想對它 substr ,取不到。怎麼解決呢?轉成 locale 的。使用 toLocaleString() 函數就可以了。不過這個函數的速度並不快,轉化的字串如果很多,將會很耗費時間。

下面是一個具體的例子：

1.建立assets檔案夾，將本地html頁面拷貝到該檔案夾下。

2.xml檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      tools:context=".MainActivity" >        <TextView          android:id="@+id/tv"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:text="@string/hello_world" />      <WebView          android:layout_below="@+id/tv"          android:id="@+id/webview"          android:layout_width="fill_parent"          android:layout_height="fill_parent"      />    </RelativeLayout> 

3.java檔案

package com.example.webview_workflowy;    import android.app.Activity;  import android.content.Intent;  import android.net.Uri;  import android.os.Bundle;  import android.webkit.WebView;  import android.widget.Toast;    public class MainActivity extends Activity {        private WebView webView;        public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          //載入頁面          webView = (WebView) findViewById(R.id.webview);          //允許JavaScript執行          webView.getSettings().setJavaScriptEnabled(true);          //找到Html檔案，也可以用網路上的檔案          webView.loadUrl("file:///android_asset/index.html");          // 添加一個對象, 讓JS可以訪問該對象的方法, 該對象中可以調用JS中的方法          webView.addJavascriptInterface(new Contact(), "contact");      }        private final class Contact {          //JavaScript調用此方法撥打到電話          public void call(String phone) {  //            startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));              Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();          }            //Html調用此方法傳遞資料          public void showcontacts() {              String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]";               // 調用JS中的方法              webView.loadUrl("javascript:show(‘" + json + "‘)");          }                    public void toast(String str){              Toast.makeText(MainActivity.this, "aaaaaaaaaaaa  --- " + str, Toast.LENGTH_LONG).show();          }      }    }  

4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>      <head>          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">          <title>Insert title here</title>          <script type="text/javascript">              function show(jsondata){                                  var jsonobjs = eval(jsondata);                      var table = document.getElementById("personTable");                      for(var y=0; y<jsonobjs.length; y++){                          var tr = table.insertRow(table.rows.length);                           var td1 = tr.insertCell(0);                          var td2 = tr.insertCell(1);                          td2.align = "center";                          var td3 = tr.insertCell(2);                          td3.align = "center";                          td1.innerHTML = jsonobjs[y].name;                           td2.innerHTML = jsonobjs[y].amount;                           td3.innerHTML = "<a href=‘javascript:contact.call(\""+ jsonobjs[y].phone+ "\")‘>"+ jsonobjs[y].phone+ "</a>";                       }              }          </script>      </head>      <body onload="javascript:contact.showcontacts()">         <button id="button" onclick = "javascript:contact.toast(‘123‘)">haha</button>         <table border="0" width="100%" id="personTable" cellspacing="0">              <tr>                  <td width="30%">姓名</td>                  <td width="30%" align="center">存款</td>                  <td align="center">電話</td>              </tr>          </table>      </body>  </html>  

 

Android WebView載入本地html並實現Java與JS互動