http://yarin.iteye.com/?page=4
Activity01.java
package com.yarin.android.Examples_08_07; import android.app.Activity;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView; public class Activity01 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.WebView01);
// 设置支持JavaScript
mWebView.getSettings().setJavaScriptEnabled(true);
// 把本类的一个实例添加到js的全局对象window中,
// 这样就可以使用window.PersonalData来调用它的方法
mWebView.addJavascriptInterface(this, "PersonalData");
// 如果不设置这个,JS代码中的按钮会显示,但是按下去却不弹出对话框
// Sets the chrome handler. This is an implementation of WebChromeClient
// for use in handling JavaScript dialogs, favicons, titles, and the
// progress. This will replace the current handler.
mWebView.setWebChromeClient(new WebChromeClient() { @Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
// TODO Auto-generated method stub
return super.onJsAlert(view, url, message, result);
} });
// 加载网页
// mWebView.loadUrl("file:///android_asset/PersonalData_new.html");
mWebView.loadUrl("file:///android_asset/PersonalData.html");
} // 在js脚本中调用得到PersonalData对象
@JavascriptInterface
public PersonalData getPersonalData() {
return mPersonalData;
} // js脚本中调用显示的资料
class PersonalData {
String mID;
String mName;
String mAge;
String mBlog; public PersonalData() {
this.mID = "123456789";
this.mName = "Android";
this.mAge = "100";
this.mBlog = "http://yarin.javaeye.com";
} public String getID() {
return mID;
} public String getName() {
return mName;
} public String getAge() {
return mAge;
} public String getBlog() {
return mBlog;
}
}
}
PersonalData_new.html
<html>
<head>
<script type="text/javascript">
function showAndroidToast(toast)
{
var personaldata_new = PersonalData.getPersonalData();
alert(personaldata_new);
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
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);
}
} function myFunction(){
console.log("Write a new Line");//调试信息
alert("Hello World!");
} </script>
</head>
<body>
<div id = "Personaldata">
<p> Personal Data </p>
<button onclick="myFunction()">click here!</button>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</div>
</body>
</html>
PersonalData.html
<html>
<head>
<script type="text/javascript">
function onload(){
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
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);
}
}
</script>
</head>
<body onload="javascript:onload()">
<div id = "Personaldata">
<p> Personal Data </p>
</div>
</body>
</html>
或者
<html>
<head>
<script type="text/javascript" src="test2.js">
</script>
</head>
<body onload="javascript:myFunction()">
<div id = "Personaldata">
<p> Personal Data </p>
<button onclick="myFunction()">click here!</button>
</div>
</body>
</html>
test2.js
function myFunction(){
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
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);
}
}
或者
<html>
<head>
<script type="text/javascript" src="test2.js">
</script>
</head>
<body><!-- onload="javascript:myFunction()"-->
<div id = "Personaldata">
<p> Personal Data </p>
<button onclick="myFunction()">click here!</button>
</div>
</body>
</html>
test2.js
window.onload= function(){
var personaldata = window.PersonalData.getPersonalData();
if(personaldata)
{
var Personaldata = document.getElementById("Personaldata");
pnode = document.createElement("p");
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);
}
}
<script type="text/javascript" src="test2.js"/>android2.2兼容,但是android4.1.2不兼容。下面的才兼容android4.1.2
<script type="text/javascript" src="test2.js"></script>
4.2及以上版本必须在js调用的java方法加上@JavascriptInterface,4.1及以下版本不用加上注释。