WebView不但可以運行一段html代碼,而且還有一個最重要的特點,就是Webview可以同javascript互相調用。該類實現從android應用中調出個人資料,然后通過javascript顯示出來。首先在android中定義一個PersonalData類,用例保存個人資料,並且定義得到這些數據的成員函數,供javascript調用。
package com.android;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView mWebView;
private PersonalData mPersonalData;
/* * Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mPersonalData = new PersonalData();
mWebView = (WebView) this.findViewById(R.id.webview);
// 設置支持javascript
mWebView.getSettings().setJavaScriptEnabled( true);
// 把本類的一個實例添加到javascript的全局對象window中
// 這樣就使用window.PersonalData來調用它的方法
mWebView.addJavascriptInterface( this, " PersonalData ");
// 加載網頁
mWebView.loadUrl( " file:///android_asset/PersonalData.html ");
}
// 在javascript腳本中調用得到PersonalData對象
public PersonalData getPersonalData(){
return mPersonalData;
}
// javascript腳本中調用顯示的資料
class PersonalData{
String mId;
String mName;
String mAge;
String mBolg;
public PersonalData(){
this.mId = " 123456 ";
this.mName = " Android ";
this.mAge = " 24 ";
this.mBolg = " http://bbs.csdn.net/ ";
}
public String getID()
{
return mId;
}
public String getName()
{
return mName;
}
public String getAge()
{
return mAge;
}
public String getBlog()
{
return mBolg;
}
}
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView mWebView;
private PersonalData mPersonalData;
/* * Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mPersonalData = new PersonalData();
mWebView = (WebView) this.findViewById(R.id.webview);
// 設置支持javascript
mWebView.getSettings().setJavaScriptEnabled( true);
// 把本類的一個實例添加到javascript的全局對象window中
// 這樣就使用window.PersonalData來調用它的方法
mWebView.addJavascriptInterface( this, " PersonalData ");
// 加載網頁
mWebView.loadUrl( " file:///android_asset/PersonalData.html ");
}
// 在javascript腳本中調用得到PersonalData對象
public PersonalData getPersonalData(){
return mPersonalData;
}
// javascript腳本中調用顯示的資料
class PersonalData{
String mId;
String mName;
String mAge;
String mBolg;
public PersonalData(){
this.mId = " 123456 ";
this.mName = " Android ";
this.mAge = " 24 ";
this.mBolg = " http://bbs.csdn.net/ ";
}
public String getID()
{
return mId;
}
public String getName()
{
return mName;
}
public String getAge()
{
return mAge;
}
public String getBlog()
{
return mBolg;
}
}
}
這里需要通過addJavascriptInterface(Object obj,String interfacename)方法將一個java對象綁定到一個javascript對象中,javascript對象名就是interfacename,作用域是global,這樣便可以擴展javascript的api,獲取android數據。
初始化webview之后,在javascript中就可以使用window.Personal.gePersonalData()來取得java對象
PersonalData.html的內容:
<html>
<head>
<script type= " text/javascript " src= " test.js "/>
</head>
<body>
<div id = " Personaldata ">
<p> Personal Data </p>
</div>
</body>
</html>
<script type= " text/javascript " src= " test.js "/>
</head>
<body>
<div id = " Personaldata ">
<p> Personal Data </p>
</div>
</body>
</html>
window.onload= function(){
//
取得java對象
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById( " Personaldata ");
pnode = document.createElement( " p ");
// 通過java對象訪問其數據
tnode = document.createTextNode( " ID: " + personaldata.getID());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Name: " + personaldata.getName());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Age: " + personaldata.getAge());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Blog: " + personaldata.getBlog());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
}
}
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById( " Personaldata ");
pnode = document.createElement( " p ");
// 通過java對象訪問其數據
tnode = document.createTextNode( " ID: " + personaldata.getID());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Name: " + personaldata.getName());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Age: " + personaldata.getAge());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
pnode = document.createElement( " p ");
tnode = document.createTextNode( " Blog: " + personaldata.getBlog());
pnode.appendChild(tnode);
Personaldata.appendChild(pnode);
}
}
在java代碼中也可以直接調用javascript方法,這樣就可以互相調用取得數據了,代碼如下:
webview.loadUrl("javascript:方法名()");
為了讓WebView從apl文件中加載assets,android sdk提供了一個schema,前綴為"file:///android_asset/"。webview遇到這樣的schema,就去當前包中的assets目錄中找內容。所以我們使用了如下的代碼來加載一個網頁:
mWebView.loadUrl("file:///android_asset/PersonalData.html");
